Zone-less<\/h2>\n
Since its early days, Angular has used the Zone.js library to figure out when change detection needs to check the component tree for changes. The idea behind it is simple: in a JavaScript application, only event handlers can change bound data. So the goal is to figure out when an event handler has been executed. To do this, Zone.js hooks into all browser objects: HTMLInputElement<\/em>, Promise<\/em>, and XmlHttpRequest<\/em> are just a few examples. This approach, which uses the dynamic nature of JavaScript to change existing objects, is called monkey patching.<\/p>\n Even if this approach usually works well, it does lead to problems. For example, bugs in this area are difficult to diagnose and since not every event handler necessarily changes bound data, change detection runs too frequently. If you develop reusable web components that hide implementation details such as the use of Angular, the consumer still has to use them with a specific Zone.js version.<\/p>\n As of version 18, the framework now also supports a data binding mode that does not require Zone.js. It is experimental for now so that the Angular team can collect feedback on the new approach. To enable this mode, the provideExperimentalZonelessChangeDetection<\/em> function must be used when bootstrapping the application:<\/p>\n Since Zone.js no longer triggers change detection, Angular needs other triggers. These are the ones that are also used in the OnPush<\/em> data binding mode:<\/p>\n This means that those who have consistently used OnPush<\/em> in the past can now switch to Zone-less with relative ease. In cases where this is not easily possible, the application can remain Zone.js-based without any concerns. The Angular team assumes that not every existing application will be switched to Zone-less and therefore continues to support Zone.js.<\/p>\n However, for new applications, it is advisable to work without Zone.js as soon as this new mode is no longer experimental. The planned Signal Components will make Zone-less applications easier in the future, as they automatically meet the requirements through the consistent use of Signals.<\/p>\n After switching to Zone-less, the reference to Zone.js can also be removed from the angular.json<\/em> . By removing this library, the bundles in production mode become about 11 KB smaller.<\/p>\n For new applications, the Angular CLI still uses Zone.js. What's new is that it now generates code that enables event coalescing by default:<\/p>\n Event coalescing means that Zone.js only takes action once for events that occur immediately after each other. The Angular team gives an example of several click handlers that are triggered one after the other due to event bubbling.<\/p>\n Update your Angular knowledge with our Modern Angular Workshop<\/a> (Englisch Version<\/a>, German Version<\/a>)<\/p>\n If a guard wants to redirect to another route, it returns the UrlTree<\/em> of this route. Unlike the navigate<\/em> method, however, this approach does not allow the specification of options for detailed control of the router's behavior. For example, the application cannot specify whether the current entry in the browser history is to be overwritten or whether parameters that should not appear in the URL are to be passed.<\/p>\n To use this option, a guard can now also return a RedirectCommand<\/em>. In addition to the UrlTree<\/em>, this RedirectCommand<\/em> receives an object of type NavigationBehaviorOptions<\/em> that controls the desired behavior:<\/p>\n The skipLocationChange<\/em> property specifies that the route change should not appear in the browser history and the specified state<\/em> contains values that are to be passed to the component to be activated, but should not appear in the URL. Further properties<\/a> provided by NavigationBehaviorOptions<\/em> can be found here<\/a>.<\/p>\n For the sake of completeness, the following listing shows the addressed component that reads the passed data:<\/p>\n The use of a RedirectCommand<\/em> is now also supported by the optional feature withNavigationErrorHandler<\/em>:<\/p>\n Another new feature in terms of redirects concerns the redirectTo<\/em> property in the router configuration. Until now, you could refer to the name of another route. Now this property also accepts a function that takes care of the redirection programmatically:<\/p>\n The return value of this function is either a UrlTree<\/em> or a string<\/em> with the path of the desired route.<\/p>\n The ng-content<\/em> element used as a target for content projection can now have default content. This is the content that Angular displays if the caller does not pass any other content:<\/p>\n The AbstractControl<\/em>, which acts as a base class for FormControl<\/em>, FormGroup<\/em>, and others, now has an events<\/em> property. This Observable informs about numerous state changes:<\/p>\n It publishes the individual events as objects of type ControlEvent<\/em>. ControlEvent<\/em> is an abstract base class with the following implementations:<\/p>\n By using server-side rendering, the requested page is displayed to the user more quickly. The browser then begins loading the JavaScript bundles that make the page interactive, also known as hydration: <\/p>\n Here, FMP stands for First Meaningful Paint and TTI for Time to Interactive. <\/p>\n The time span between FMP and TTI, also known as the "uncanny valley", requires special attention. The user is already shown the page here. However, the JavaScript that reacts to user interactions has not yet been loaded. Clicks and other interactions are therefore ignored.<\/p>\n To prevent this, Angular now offers an event replay that records the interactions in the uncanny valley and then repeats them. This is made possible by a minimal script that the browser initially loads together with the pre-rendered page.<\/p>\n Event Replay comes as an optional feature for provideClientHydration<\/em> and is activated with the withEventReplay<\/em> function:<\/p>\n The implementation of Event Replay has been proven at Google for some time. It comes from Google's internal framework Wiz Wiz<\/a>, which is known for its capabilities in the areas of SSR and hydration and is therefore used for performance-critical public solutions.<\/p>\n At this year's ng-conf, the Angular team announced that the Angular and Wiz teams will be working more closely together in the future. In a first step, the Wiz team will use Angular's Signals, while Angular has adopted the tried and tested event replay options from the Wiz team.<\/p>\n When using SSR, the HttpClient<\/em> caches the results of HTTP requests made on the server side so that the requests do not have to be executed again in the browser. An interceptor delegating to the Transfer State API is used for this. The Transfer API embeds the cached data in the markup of the pre-rendered page and the HttpClient<\/em> accesses it in the browser.<\/p>\n This implementation now also takes into account that different URLs can be used on the server side than in the browser. For this purpose, an object can be configured that maps internal server-side URLs to the URLs for use in the browser. The following example from respective pull request<\/a> illustrates the configuration of this object:<\/p>\n HttpClient<\/em> no longer automatically places the results of server-side HTTP requests that contain an Authorization<\/em> or Proxy-Authorization<\/em> header in the Transfer State. If you want to continue to cache such results in the future, use the new includeRequestsWithAuthHeaders<\/em> property:<\/p>\n If desired, the Angular DevTools now show which components have already been hydrated. To do this, activate the Show hydration overlays<\/em> option at the bottom right:<\/p>\n This option displays all hydrated components with a blue-transparent overlay and a water drop icon in the top right.<\/p>\n The new ApplicationBuilder<\/em> was introduced with Angular 17 and automatically set up for new Angular applications. Since it is based on modern technologies such as esbuild, it is much faster than the original webpack-based builder, which Angular still supports. In initial tests, I was able to see an acceleration of a factor of 3 to 4. The ApplicationBuilder<\/em> also comes with convenient support for SSR.<\/p>\n When updating to Angular 18, the CLI now suggests converting existing applications to the ApplicationBuilder:<\/p>\n Since the CLI team has invested a lot of effort in feature parity between the classic and the new implementation, this change should work well in most cases and speed up build times dramatically.<\/p>\n In addition to the new features already described, there are some smaller updates and improvements:<\/p>\n Modern Angular has even more to offer:<\/p>\n In our free eBook, we cover these topics in 14 chapters. Download it now:<\/p>\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideExperimentalZonelessChangeDetection(),\n [\u2026]\n ]\n}<\/code><\/pre>\n\n
Coalescing Zone<\/h2>\n
export const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n [\u2026]\n ]\n};<\/code><\/pre>\nModern Angular<\/h2>\n
![](\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/04\/sujet-de.jpg\")
<\/a><\/p>\nNew Features in Router Redirects<\/h2>\n
export function isAuth(destination: ActivatedRouteSnapshot) {\n const router = inject(Router);\n const auth = inject(AuthService);\n\n if (auth.isAuth()) {\n return true;\n }\n\n const afterLoginRedirect = destination.url.join('\/');\n const urlTree = router.parseUrl('\/login');\n\n return new RedirectCommand(urlTree, {\n skipLocationChange: true,\n state: {\n needsLogin: true,\n afterLoginRedirect: afterLoginRedirect\n } as RedirectToLoginState,\n });\n}\n\nexport const routes: Routes = [\n {\n path: '',\n redirectTo: 'products',\n pathMatch: 'full'\n },\n {\n path: 'products',\n component: ProductListComponent,\n },\n {\n path: 'login',\n component: LoginComponent,\n },\n {\n path: 'products\/:id',\n component: ProductDetailComponent,\n canActivate: [isAuth]\n },\n {\n path: 'error',\n component: ErrorComponent\n }\n];<\/code><\/pre>\n@Component({ \u2026 })\nexport class LoginComponent {\n router = inject(Router);\n auth = inject(AuthService);\n\n state: RedirectToLoginState | undefined;\n\n constructor() {\n const nav = this.router.getCurrentNavigation();\n\n if (nav?.extras.state) {\n this.state = nav?.extras.state as RedirectToLoginState;\n }\n }\n\n logout() {\n this.auth.logout();\n }\n\n login() {\n this.auth.login('John');\n if (this.state?.afterLoginRedirect) {\n this.router.navigateByUrl(this.state?.afterLoginRedirect);\n }\n }\n\n}<\/code><\/pre>\nexport function handleNavError(error: NavigationError) {\n console.log('error', error);\n\n const router = inject(Router);\n const urlTree = router.parseUrl('\/error')\n return new RedirectCommand(urlTree, {\n state: {\n error\n }\n })\n}\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n [\u2026]\n provideRouter(\n routes,\n withComponentInputBinding(),\n withViewTransitions(),\n withNavigationErrorHandler(handleNavError),\n ),\n ]\n};<\/code><\/pre>\nexport const routes: Routes = [\n {\n path: '',\n redirectTo: () => {\n const router = inject(Router);\n \/\/ return 'products' \/\/ Alternative\n return router.parseUrl('\/products');\n },\n pathMatch: 'full'\n },\n [\u2026],\n];<\/code><\/pre>\nStandard Content for Content Projection<\/h2>\n
<div class="pl-10 mb-20">\n <ng-content>\n <b>Book today to get 5% discount!<\/b>\n <\/ng-content>\n<\/div><\/code><\/pre>\nEvents for Reactive Forms<\/h2>\n
export class ProductDetailComponent implements OnChanges {\n\n [\u2026]\n\n formControl = new FormControl<number>(1);\n\n [\u2026] \n\n constructor() {\n this.formControl.events.subscribe(e => {\n console.log('e', e);\n });\n }\n\n [\u2026]\n\n}<\/code><\/pre>\n\n
Event Replay for SSR<\/h2>\n
![\"Uncanny](\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/06\/Server-Side-Rendering.png\")
<\/p>\nexport const appConfig: ApplicationConfig = {\n providers: [\n [\u2026],\n provideClientHydration(\n withEventReplay()\n )\n ]\n};<\/code><\/pre>\nAutomatic TransferState for HTTP Requests<\/h2>\n
\/\/ in app.server.config.ts\n{\n provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP,\n useValue: {\n 'http:\/\/internal-domain:80': 'https:\/\/external-domain:443'\n }\n}\n\n\/\/ Alternative usage with dynamic values \n \/\/ (depending on stage or prod environments)\n{\n provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP,\n useFactory: () => {\n const config = inject(ConfigService);\n return {\n [config.internalOrigin]: [config.externalOrigin],\n };\n }\n}<\/code><\/pre>\nwithHttpTransferCache({\n includeRequestsWithAuthHeaders: true,\n})<\/code><\/pre>\nDevTools and Hydration<\/h2>\n
![\"The](\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/06\/hydration-dev-tools.png\")
<\/p>\nMigration to new ApplicationBuilder<\/h2>\n
![\"When](\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/06\/migrate.png\")
<\/p>\nFurther Innovations<\/h2>\n
\n
What's next? Modern Angular!<\/h2>\n
\n
![](\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/04\/cover-1.png\")
<\/a><\/p>\n