Angular 18 introduces the revision of change detection with Zone.js, which has long been on the roadmap, and is now available in an experimental version. The Signals API introduced with Angular 17 is also now in the Developer Preview and will probably become a stable version in the next few months. Other changes include support for Material 3, the move to angular.dev as a new Angular homepage and the stabilization of the Defferable Views.
Experimental support for zoneless change detection
Zone.js - What is it?
Change detection in Angular is responsible for updating the view if there are changes in the application. Angular runs through the component tree and forwards the detected changes to the child components in the event of a change. Zone.js was previously used for this. This library creates a kind of wrapper around JavaScript code, allowing it to be executed in a zone. This zone has various properties, such as a closed execution context that can be monitored. Angular uses this to create such a zone for each component and automatically monitor it for changes and trigger change detection accordingly. It is already possible to do without zone.js, but then the change detection must be executed manually.
With Angular 18, there is now a new way via zoneless change detection. To do this, you can use the application bootstrap provideExperimentalZonelessChangeDetection as follows:
bootstrapApplication(App, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});
In addition, Zone.js must be removed from the polyfills in Angular.
Advantages of not using zones
- PerformanceZone.js hooks always run when the state may have changed. This causes the synchronization to run more often than necessary.
- Costs: Both the bundle size and the start time are reduced by not using Zone.js.
- DebuggingZone.js makes debugging difficult, especially if you need to find out in which zone something went wrong.
Further changes at a glance
- Angular.dev is now the new home of Angular documentation. There are updated articles on the latest Angular topics as well as interactive tutorials with a new playground where you can test the latest features directly on the website.
- Material 3 is now stable and the associated components can now be used. These components use the latest iteration of the Google Material 3 Design Guide.
- Signals API is now in the developer preview and will probably become a stable version in the next few months. It is particularly interesting and useful for zoneless change detection and was introduced with Angular version 17.
- Deferrable Views were introduced with Angular 17 and are now stable with Angular 18. Deferrable views make it possible to use components, directives and pipes intuitively and via lazy loading. This can improve initial loading times, as only certain parts of the template are loaded directly and others only when they are needed.
- TypeScript 5.4 Support With Angular 18, at least TypeScript version 5.4 must now be used. Versions 5.3 and 5.4 contain numerous improvements in terms of performance and type inference as well as new features. Some new features are e.g. type-narrowing for switch statements, Object.groupBy and Map.groupBy as well as restrictions for enums (abandonment of Infinity, -Infinity and NaN). These innovations improve type safety and offer extended possibilities for grouping data, while at the same time introducing some restrictions to improve code quality.
You can find out more about Signals and Defferable Views in one of our older posts on the introduction of Angular 17 here.
All other highlights can be found in this article: Angular 18 Release. The integration of Wiz and Angular will be particularly interesting in the coming months to see how the two Google frameworks complement each other: Angular and Wiz.
Sources:
Entwickler.de: Angular 18 Features
Angular Blog on Defferable Views
