Angular 18 wurde am 23.05.2024 verföffentlicht. Wir haben uns bereits im Vorfeld einige der Features und Neuerungen, die bekannt geworden sind, für dich angesehen und geben dir nun nach der Veröffentlichung auch eine Übersicht über die wichtigsten Neuerung.
Update vom 14.06.2024:
Angular 18: Das sind die neuen Features!
Wie bereits angekündigt möchten wir euch nun, im Rahmen eines Updates dieses Artikels, die tatsächlichen Neuerungen von Angular 18 vorstellen.
Neue Webseite für Angular Entwickler
Ab sofort ist angular.dev die offizielle Webseite für die Dokumentation von Angular 18. Das Angular Team hatte sich das Ziel gesetzt, den Einstieg in Angular so praxisnah und intuitiv wie möglich zu gestalten. Nach der Sichtung einiger Tutorials können wir dies bestätigen. Schaut euch die neue Seite am besten selbst einmal an.
Weiterentwicklung von Change Detection in Angular 18
Für das Auslösen der Change Detection von Angular war in der Vergangenheit eine Bibliothek mit dem Namen zone.js verantwortlich. Allerdings hatte diese Bibliothek einige Nachteile in Bezug auf Performance und Entwickler:innenerfahrung. Deswegen arbeitet das Team von Angular seit Jahren an einer Möglichkeit, Angular ohne zone.js zu nutzen. Mit dem Release von Angular 18 ist es jetzt soweit und die ersten experimentellen APIs für zoneless sind da.
Das sind die Vorteile ab Angular 18:
- Optimierte Kompatibilität mit Mikro-Frontends
- Interoperabilität mit anderen Frameworks
- Leichteres Debuggen
- Bessere Lesbarkeit der Stack Traces
- Optimiertes Rendering
- Beschleunigte Laufzeit
Aktualisierung auf zoneless
Wie wird sich die Aktualisierung auf zoneless auswirken? zoneless ist ein zentraler Bestandteil der Weiterentwicklung und Neuerung von Angular 18. Bei der Entwicklung des Angular Frameworks wird darauf geachtet, dass alle existierenden APIs auch weiterhin erwartungsgemäß funktionieren. Das Entwickler:innenteam wird deswegen sicherstellen, dass die bestehenden Anwendungen so einfach wie möglich auf zoneless umgestellt werden können.
Coalescing per Default
Für zoneless Apps, die zone.js mit aktiviertem Coalescing verwenden, wird ab Angular 18 derselbe Scheduler genutzt. Außerdem hat das Angular Team Coalescing von Zonen standardmäßig aktiviert. Dadurch reduzieren sich die Änderungszyklen in neuen zone.js Apps.
Native Await für zoneless Apps
Wenn Entwickler:innen eine Anwendung erstellen, die die aktuell experimentelle zoneless Change Detection nutzt, wird Angular CLI das native async/await verwenden. Es wird nicht auf promises herabgestuft, damit die Bundles kleiner werden und das Debugging optimiert wird.
Komponenten unterstützen zoneless
In Angular CDK und Angular Material hat das Entwickler:innenteam die Unterstützung für zoneless aktiviert. Das hat auch zur Verbesserung des zoneless Modells beigetragen.
Material 3 stable
Das Angular Team führte vor einigen Monaten die experimentelle Unterstützung von Material 3 ein. Auf der Grundlage des Feedbacks von Entwickler:innen wurde es optimiert und ist mit der Version von Angular 18 in den stable Modus übergegangen.
Built-in Control Flow stable
Built-in Control Flow wurde zusammen mit Deferrable Views in der Version von Angular 17 mit verbesserter Performance angekündigt. Die neue Syntax wurde sehr gut von der Community angenommen und ist nun stable.
Deferrable Views stable
Auch Deferrable Views ist jetzt stable. In letzter Zeit waren Deferrable Views ein häufig diskutiertes Thema, da sie Entwickler:innen ermöglichen, die Core Web Vitals der Anwendungen mühelos zu optimieren.
Verbesserungen beim serverseitigen Rendering
Nachdem das Angular Entwickler:innenteam intensiv mit dem Chrome Aurora Team zusammengearbeitet hat, wurde nun verkündet, dass die Hydration für i18n Blöcke im Developer Preview Modus von Angular 18 zur Verfügung steht.
Event Replay in Angular 18
Eine der Kernbibliotheken von Google.com, Event Dispatch, ist nun im Angular Monorepo enthalten. Ab Angular 18 unterstützt Event Dispatch die Wiedergabe von Ereignissen, wenn Hybrid Rendering verwendet wird. Angular wird Event Replay ab Angular 18 mit Event Dispatch aufzeichnen.
Verbessertes Debugging
Um den Hydrierungsprozess von Angular zu visualisieren, hat das Angular Team die DevTools aktualisiert. Ein Symbol, das den Hydrierungsstatus anzeigt, befindet sich nun neben jeder Komponente. Zum Anzeigen der Komponenten, die Angular auf der Seite hydriert hat, kann auch ein Overlay Modus aktiviert werden. Wenn die Anwendung Fehler aufweist, visualisieren die DevTools diese im Komponentenexplorer.
Hydration Unterstützung in CDK und Material
In Angular 17 waren einige Komponenten von CDK und Material von der Hydration ausgeschlossen. Das führte zu einem erneuten Rendering. Mit der neuesten Version Angular 18 sind alle Komponenten voll hydrationsfähig.
Firebase App Hosting für Angular 18
Das Angular Entwicklerteam arbeitet seit knapp einem Jahr mit Firebase App Hosting zusammen, um eine reibungslose Erfahrung für Angular Entwickler:innen zu gewährleisten. Das Hosting der Anwendung spielt eine essenzielle Rolle bei der Performance, Zuverlässigkeit, Skalierbarkeit und Produktivität. Gerade Anwendungen, die hybrides Rendering nutzen, haben unterschiedliche Anforderungen an das Hosting in Bezug auf serverseitiges Rendering, pre Renderung und clientseitiges Rendering. Das kann mit Firebase gelöst werden.
Route Redirects als Funktionen
In Angular 18 akzeptiert redirectTo nun eine Funktion, die einen String zurückgibt. Das ermöglicht mehr Flexibilität im Umgang mit Redirects.
TypeScript 5.4
Damit Entwickler:innen die Vorteile der neuesten Features von TypeScript 5.4 nutzen können, wurde die TypeScript Abhängigkeit aktualisiert.
Community
Dass das Angular Team die Wünsche und Vorschläge der Community ernst nimmt, zeigen die folgenden Neuerungen in Angular 18.
Fallback Inhalt für ng-content
Die Angabe eines Default Inhalts für ng-content war einer der häufigsten geäußerten Wünsche der Community. Das Angular Team hat darauf reagiert und es ist nun in der Version Angular 18 möglich.
Standardisierte Ereignisse zur Änderung des Kontrollstatus
Dieses Feature wurde auf GitHub ebenfalls von vielen Entwickler:innen gewünscht. Die Klassen FormControl, FormGroup und FormArray von Angular Forms stellen nun eine Eigenschaft, die sich Events nennt, zur Verfügung. Damit lässt sich ab sofort ein ganzer Strom von Ereignissen für die Formularsteuerung verfolgen.
Analog.js
Analog.js ist ein von der Community betriebenes Meta-Framework für Angular, das nun in der Version 1.0 veröffentlicht wurde. Es hat viele hilfreiche Features, die von der Community geschätzt werden. Dazu gehören API-Routing, filebasiertes Routing und Markdown Support.
State-Management Bibliotheken
Die Entwickler:innen von Angular 18 heben auch positiv hervor, dass mittlerweile viele beliebte State-Management Bibliotheken Angular Signals adaptieren. Dazu gehören unter anderem rxAngular, ngx und ngrx.
Weitere Pläne
Zu guter Letzt werfen wir noch einen Blick auf die weiteren angekündigten Pläne des Angular Entwickler:innenteams.
Partial Hydration
Partial Hydration basiert auf dem gleichen Prinzip wie Deferrable Views. Statt wie bislang den @placeholder Block auf dem Server zu rendern, wird es bald möglich sein, einen Modus zu aktivieren, bei dem Angular den Hauptinhalt des @defer Blocks auf dem Server rendert.
Signal APIs in der Developer Preview
In Angular 17 wurden neue Signaleingänge, signalbasierte Abfragen und eine neue Ausgabesyntax angekündigt. In den kommenden Monaten wird das Angular Team die Implementierung auf Basis des Feedbacks der Community überarbeiten und anschließend die stable Version verkünden.
Kooperationen
Um die Entwickler:innenerfahrung für alle zu verbessern, arbeitet das Team bereits mit den Herstellern von Tools wie Puppeteer, Cypress, Nx, Storybook und Vite zusammen.
Update vom 23.05.2024:
Angular 18 ist verfügbar!
Am heutigen 23.05.2024 wurde Angular in der Version 18 veröffentlicht. Den gesamten Changelog findet ihr im Angular Repository auf Github.
Das wichtigste in Kürze:
- Experimenteller Support für zoneless Change Detection
- Neue Website mit Dokumentation, Tutorials, Playground, uvm: angular.dev
- Material 3, Verzögerte Ansichten (deferrable views) und eingebaute Controls Flows sind jetzt offiziell stable und bringen eine Reihe an Verbesserungen mit sich
- Verbesserungen im serverseitigen Rendern, wie bspw. i18n Hydration Unterstützung, besseres Debugging, Hydration Unterstützung in CDK, sowie Angular Material und zu guter letzt Event Replay, mit der gleichen Bibliotehk, die auch von der Google Suche genutzt wird.
- ng-content unterstützt nun Fallback Content
Eine detailliertere Übersicht der Neuerungen haben wir in kürze für euch!
Rückblick der Neuerungen bei Angular 16 & Angular 17
Wir beginnen mit einem kurzen Rückblick. Das waren einige der wesentlichsten Neuerungen, die bei Angular 16 und Angular 17 umgesetzt wurden:
Angular 16
- zone.js wurde zu einer optionalen Abhängigkeit bei Angular 16
- Standalone APIs wurden erweitert
- experimentelle Unterstützung für Jest
- selbstschließende Tags bei Angular 16
- serverseitiges Rendering durch Angular Universal
- Injectable DestroyRef wurde eingeführt
- Verbesserung der Interoperabilität mit RxJS
Angular 17
- Signals haben nun einen stabilen Status
- Standalone Components werden bei Angular 17 eingeführt
- verbesserte Lern- & Dokumentationswebsite
- neue Syntax für Control Flow bei Angular 17
Voraussichtliche Angular 18 Neuerungen & Features
Es ist bisher nicht genau bekannt, welche Verbesserungen bei Angular 18 geplant sind, aber das Team von Angular hat bereits einige Punkte angesprochen und es gibt Vermutungen. Diese sehen wir uns im Folgenden an.
Unterstützung von TypeScript 4.7 in Angular 18
Mit der Einführung von Angular 18 wird die vollständige Unterstützung von TypeScript 4.7 zur Verfügung stehen. Diese Version von TypeScript bringt eine Reihe bedeutender Neuerungen und Verbesserungen mit sich, die es Entwickler:innen ermöglichen, Anwendungen effektiver und robuster zu gestalten.
Die Integration von Template Literal Types ist dabei ein besonders spannender Fortschritt. Diese Funktion ermöglicht es, die Typisierung von Template-Strings präziser zu definieren. Durch die Verwendung dieser Typen können Fehler bereits in einem frühen Stadium der Entwicklung erkannt und behoben werden, was die Qualität des Codes erheblich steigert.
Eine weitere wichtige Neuerung sind die Import-Arten, die TypeScript 4.7 einführt. Diese erlauben eine noch modularere und organisierte Struktur. Entwickler:innen können dadurch ihre Projekte besser strukturieren und Abhängigkeiten klarer definieren, was die Wartbarkeit und Skalierbarkeit von Anwendungen fördert.
Mit der neuesten Version von TypeScript können Entwickler:innen auch von einer sichereren und konsistenteren Verwendung von readonly profitieren, um die Unveränderbarkeit innerhalb einer Anwendung umzusetzen.
Neue API für ng-template
Mit Angular 18 wird es auch eine neue, innovative API für ng-template geben. Diese vereinfacht und verbessert die Erstellung und Verwendung von Templates. Sie wurde entwickelt, um die Leistungsfähigkeit und Flexibilität zu steigern.
Ohne Abstriche bei der Performance machen zu müssen, können Entwickler:innen mir der verbesserten API komplexere Logik und Bedingungen in Templates integrieren. Die Erfüllung spezifischer Anforderungen und Erwartungen von Nutzer:innen wird dadurch erleichtert.
Auch die Unterstützung bei der Erstellung wiederverwendbarer und leicht wartbarer Templates ist ein zentraler Vorteil der neuen ng-template API. Diese können als eigenständige Komponente innerhalb einer Anwendung oder projektübergreifend zum Einsatz kommen. Entwickler:innen können Code-Duplizierung reduzieren und die Konsistenz erhöhen, indem sie diese modularen Templates verwenden.
Verbesserte Change Detection bei Angular 18
Bei größeren Anwendungen hat Angular 17 Schwierigkeiten bei der Erkennung von Änderungen. Voraussichtlich wird Angular 18 bei größeren Komponenten effizienter sein als seine Vorgängerversion. Denkbar ist auch, dass OnPush zur Standardeinstellung wird. Das verbessert die Reaktionsfähigkeit für User:innen.
Bei früheren Versionen von Angular nutzte das Framework Zone.js, um Zustandsänderungen zu verfolgen. Seit dem Release von Angular 17 hat das Team Angular Signals in die Developer Preview implementiert. Das ermöglicht Entwickler:innen Zustände von Anwendungen mit Signals statt mit Zone.js zu überwachen.
Barrierefreiheit für Angular Components
Das Angular-Team evaluiert derzeit Angular Material anhand einiger gängiger Barrierefreiheitsstandards, wie WCAG. Wenn dieser Prozess abgeschlossen ist sollen deutliche Verbesserungen in der Barrierefreiheit des Frameworks erreicht werden. Ein richtiger und wichtiger Schritt, auch mit Hinblick auf das Barrierefreiheitsstärkungsgesetz 2025 (BFSG).
Optimierte Tools für Debugging
Angular 18 wird auch eine Reihe von Verbesserungen bei Tools zum Debugging herausbringen. Diese vereinfachen das Debuggen von Angular-Anwendungen.
Eine der wichtigsten Neuerungen ist die verbesserte Möglichkeit, Source Maps zu integrieren. Mithilfe von Source Maps können Entwickler:innen den Code direkt in den Entwicklungswerkzeugen des Browsers anzeigen und debuggen.
Entwickler:innen können ihre Anwendungen in Angular 18 mit Performance Profilen genau analysieren. Diese bieten Einblick in die Ausführungszeit von Skripten, Rendering Prozesse und andere Werte. Durch die Analyse können die Prozesse gezielt optimiert werden.
Auch die verbesserte Visualisierung des Komponentenbaums und der Datenbindung sind hilfreiche Features. Mit diesen Werkzeugen können Entwickler:innen die Struktur der Anwendungen visuell darstellen und den Fluss der Daten besser nachvollziehen. Gerade bei großen Anwendungen in Angular ist das eine Herausforderungen, weswegen diese Art der Visualisierung wertvoll ist.
Standard Hybrid Rendering
Das Team von Angular arbeitet daran, hybrides Rendering als Standard für neue Projekte zur Verfügung zu stellen. Das Ziel des hybriden Renderings ist es, die Geschwindigkeit zu erhöhen. Hybrides Rendering kombiniert das Beste aus zwei Welten.
Zum einen betrifft das die Geschwindigkeit bei der Website-Bereitstellung durch den Server und zum anderen bei der clientseitigen Aktualisierung. Dadurch können Websites und Anwendungen sowohl reibungslos von Suchmaschinen indexiert als auch von User:innen genutzt werden.
Verbesserte Leistung mit Ivy bei Angular 18
Auch mit Verbesserungen am Ivy-Compiler ist bei Angular 18 zu rechnen. Dies soll die Effizienz steigern und bietet einige Vorteile in wichtigen Schlüsselbereichen. Die Startzeit von Angular-Anwendungen verkürzt sich durch die Optimierung von Ivy erheblich. Das ist besonders hilfreich bei Anwendungen, die auf Geräten mit begrenzen Ressourcen ausgeführt werden. Ebenso spielt es eine entscheidende Rolle bei Umgebungen, bei denen rasche Ladezeiten entscheidend sind, unter anderem mobile Plattformen mit hohem Benutzeraufkommen.
Die Reduzierung der Bundlegrößen ist ein weiterer wichtiger Bestandteil der Optimierung. Kleinere Bundles bedeuten schnellere Downloadzeiten und damit ein verbessertes Nutzererlebnis. Da viele Suchmaschinen die Ladezeit in ihre Algorithmen einbeziehen, trägt dies auch zur Verbesserung der Suchmaschinenoptimierung von Webanwendungen bei.
Die Überarbeitung des Ivy-Compilers wirken sich aber nicht nur auf die Startzeit und Paketgrößen aus, sondern verbessern auch die Gesamtleistung der Anwendungen. Die Codeausführung ist effizienter und das Benutzererlebnis flüssiger.
Modernisierte Tools für Unit Testing
Mit dem Ersetzen von Protractor durch bessere Varianten wie NightWatch und Cypress hat das Team von Angular, bereits in früheren Versionen, das Unit Testing optimiert. Auch die Umstellung von Karma zu Web Test Runner optimierte das Unit Testing bei Angular. Deswegen ist auch bei neueren Versionen von Angular mit Modernisierungen des Unit Testings zu rechnen.
Fazit
Angular wird auch mit dem neuesten Release wieder eine Reihe von hilfreichen Verbesserungen implementieren. Sobald Angular 18 veröffentlicht wurde und die final umgesetzten Neuerungen bekannt sind, werden wir dich darüber informieren. Speichere unseren Artikel am besten in deinen Lesezeichen, damit du es nicht verpasst.