Mit Angular 18 wird die seit langem auf der Roadmap stehende Überarbeitung der Change Detection mit Zone.js eingeführt und steht nun in einer experimentellen Version zur Verfügung. Auch die mit Angular 17 eingeführte Signals API befindet sich jetzt in der Developer Preview und wird wahrscheinlich in den nächsten Monaten zu einer stabilen Version. Weitere Änderungen umfassen den Support von Material 3, den Umzug zu angular.dev als neue Angular-Homepage sowie die Stabilisierung der Defferable Views.
Experimenteller Support für zoneless Change Detection
Zone.js – Was ist das?
Die Change Detection in Angular ist dafür verantwortlich, die View zu aktualisieren, wenn es Änderungen in der Anwendung gibt. Angular durchläuft dabei den Komponentenbaum und gibt bei einer Veränderung die erkannten Änderungen an die Kindkomponenten weiter. Bisher wurde dafür Zone.js verwendet. Diese Bibliothek legt eine Art Wrapper um JavaScript-Code, wodurch dieser in einer Zone ausgeführt werden kann. Diese Zone hat verschiedene Eigenschaften, wie z.B. einen abgeschlossenen Ausführungskontext, der überwacht werden kann. Angular nutzt dies, um für jede Komponente eine solche Zone anzulegen und diese automatisch auf Veränderungen zu überwachen und dementsprechend die Change Detection zu triggern. Man kann auch jetzt schon auf zone.js verzichten muss dann die Change Detection aber manuell ausführen.
Mit Angular 18 gibt es nun einen neuen Weg über eine zoneless Change Detection. Dafür kann man im Application Bootstrap provideExperimentalZonelessChangeDetection wie folgt mit angeben:
bootstrapApplication(App, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});
Zudem muss Zone.js aus den Polyfills in Angular entfernt werden.
Vorteile des Verzichts auf Zonen
- Performance: Zone.js-Hooks laufen immer, wenn sich der State verändert haben könnte. Das führt dazu, dass die Synchronisation öfter läuft als nötig.
- Kosten: Sowohl die Bundle-Größe als auch die Startzeit verringern sich durch den Verzicht auf Zone.js.
- Debugging: Zone.js erschwert das Debugging, besonders wenn man herausfinden muss, in welcher Zone etwas schiefgegangen ist.
Weitere Änderungen im Überblick
- Angular.dev ist ab sofort die neue Heimat der Angular-Dokumentation. Es gibt aktualisierte Artikel zu den neuesten Angular-Themen sowie interaktive Tutorials mit einem neuen Playground, bei dem man direkt auf der Website die neuesten Features testen kann.
- Material 3 ist jetzt stabil und die zugehörigen Komponenten können nun verwendet werden. Diese Komponenten verwenden die neueste Iteration des Google Material 3 Design Guides.
- Signals API befindet sich jetzt in der Developer Preview und wird wahrscheinlich in den nächsten Monaten zur stabilen Version. Sie ist besonders für die zoneless Change Detection interessant und nützlich und wurde mit Angular Version 17 eingeführt.
- Deferrable Views wurden bereits mit Angular 17 eingeführt und sind nun mit Angular 18 stabil. Deferrable Views ermöglichen es, Komponenten, Direktiven und Pipes intuitiv und via Lazy-Loading zu nutzen. Dadurch können die initialen Ladezeiten verbessert werden, da nur bestimmte Teile des Templates direkt geladen werden und andere erst, wenn sie benötigt werden.
- TypeScript 5.4 Support mit Angular 18 muss nun mindestens TypeScript in Version 5.4 verwendet werden. Die Versionen 5.3 und 5.4 enthalten zahlreiche Verbesserungen in Bezug auf Performance und Typ-Inferenz sowie neue Features. Einige neue features sind z.B Type-Narrowing bei Switch-Statements, Object.groupBy und Map.groupBy sowie einschränkungen bei Enums (Verzicht auf Infinity, -Infinity und NaN). Diese Neuerungen verbessern die Typensicherheit und bieten erweiterte Möglichkeiten zur Gruppierung von Daten, während sie gleichzeitig einige Einschränkungen zur Verbesserung der Codequalität einführen.
Mehr über Signals und Defferable Views findet man in einem unserer älteren Beiträge zur Einführung von Angular 17 hier.
Alle weiteren Highlights können in diesem Beitrag nachgelesen werden: Angular 18 Release. Die Integration von Wiz und Angular wird in den nächsten Monaten besonders interessant, um zu sehen, wie sich die beiden Google-Frameworks gegenseitig ergänzen: Angular and Wiz.
Quellen:
Entwickler.de: Angular 18 Features
Angular Blog zu Defferable Views
