Angular 16 Release: Übersicht der Änderungen

Bei GARAIO setzen wir für neue Web-Applikationen konsequent auf Angular und sind deshalb immer sehr gespannt auf die neuen Features und Verbesserungen, die mit einem neuen Release kommen.
Mit dem aktuellen Release wurden viele neue Features eingeführt, die die Zukunft des Frameworks prägen. Auf einige dieser Features versuchen wir, mit diesen Blogbeiträgen, etwas näher einzugehen.

Dies ist Teil 1 einer fünfteiligen Serie über den neuen Angular 16 Release, welcher am 4. Mai 2023 veröffentlicht wurde.

Die Beiträge

1. Übersicht der Änderungen
2. Was gibt es beim updaten von bestehenden Applikationen zu beachten?
3. Was hat sich an den Templates und Komponenten geändert?
4. Wohin geht die Reise mit der Reaktivität (Stichwort Signals)?
5. Wie funktioniert SSR mit Hydration?

Übersicht der Änderungen

Eine Rolle definiert sich durch einen bestimmten Sinn und Zweck, welcher sich an der Mission und der Strategie eines Unternehmens ausrichtet.

ngcc wurde entfernt

Der grösste Hinderungsgrund für die Adaption von Angular 16 für bestehende Applikationen dürfte die Entfernung von ngcc sein. Gerade im Enterprise Umfeld, mit einer bestimmten Applikationsgrösse wird zum Teil erheblicher Aufwand anfallen, um eine solche Migration zu bewerkstelligen.

ngcc wurde verwendet, um Bibliotheken, die nicht mit dem Ivy-Compiler kompiliert wurden, beim Builden der Applikation für Ivy zu kompilieren.

Dazu mehr in Teil 2 unserer Blog-Serie zu Angular 16.

Standalone Komponenten

Viele Dinge, welche mit Angular 15 noch nicht für Standalone Komponenten, bzw. Modul-lose Applikationen möglich waren, wurden jetzt nachgereicht.
Dazu gehören:

• Mit ng new kann jetzt eine Standalone Applikation erstellt werden. Dazu musste man vorher mittels Migrationsskript eine neu generierte Modul-basierte Applikation in eine Standalone Applikation umwandeln.
• Service Workers und App Shell stehen jetzt auch für Standalone Apps zur Verfügung.

Änderungen an den Templates und Komponenten

Hier gab es auch einige interessante Ergänzungen. Unter anderem:

• Routing-Parameter können jetzt auch als Input-Parameter an Komponenten übergeben werden.
• Input-Parameter können jetzt als required markiert werden.
• Ab sofort können Angular-Komponenten im Template auch mit Self-Closing Tags genutzt werden.
• Imports können auch aus dem Template heraus automatisch ergänzt werden (autocomplete).

Mehr hierzu in Teil 3 unserer Blog-Serie zu Angular 16.

Reaktivität

• Einführung von Signals
• Dazu passend die Einführung von takeUntilDestroy als neuer RxJS-Operator

Darauf was Signals sind und was diese für Implikationen auf neue und bestehende Applikationen haben, gehen wir in Teil 4 unserer Blog-Serie zu Angular 16 ein.

Anpassungen zu Server Side Rendering (SSR)

• Angular Universal bleibt weiterhin die offizielle Lösung für SSR
• Hydration ist jetzt möglich, was zu einem besseren User-Erlebnis führt (kein Flickern mehr, wenn die Client-Seite übernimmt)

Hierzu mehr in Teil 5 unserer Blog-Serie zu Angular 16.

Developer Tooling

• Angular CLI unterstützt jetzt auch esbuild
• ng serve verwendet nun vite für den Entwicklungsserver
• Jest, und in Zukunft auch Web Test Runner, werden jetzt auch für Unit Tests unterstützt

Auch dazu mehr in Teil 5 unserer Blog-Serie zu Angular 16.

Fazit

Mit Angular 16 wurden die Grundsteine für eine moderne, zukunftsfähige Web-Entwicklung gelegt.

Unter anderem wurde die Reaktivität verbessert, die Entwicklung von Standalone Applikationen vereinfacht und die Performance von SSR-Applikationen verbessert.

Alles auch Grundlagen, um in Zukunft ohne zone.js auszukommen und damit auch schlanker und performanter unterwegs zu sein.

Dazu wird mit Angular 17 sicherlich noch mehr kommen.

Lesestoff

Die offizielle Ankündigung von Miko Gechev, vom Angular Team (auf Englisch).