Angular v20 vorgestellt

(blog.angular.dev)

3 Punkte von GN⁺ 2025-06-01 | Noch keine Kommentare. | Auf WhatsApp teilen

Wichtige APIs rund um Reaktivität (reactivity) wurden stabilisiert, und die Funktion Zoneless wurde als Developer Preview veröffentlicht
Durch die Integration mit Chrome DevTools und weitere Verbesserungen wurden das Debugging-Erlebnis und die Entwicklungseffizienz deutlich gesteigert
Unterstützung für GenAI in der Entwicklung, Einführung von llms.txt sowie Bereitstellung von Leitfäden und Open-Source-Beispielen zum Aufbau von AI-Apps
Die bisherigen NgIf, NgFor, NgSwitch wurden offiziell als veraltet markiert, empfohlen wird der Wechsel zu integriertem control flow
Ein neues Projekt zur Auswahl des offiziellen Angular-Maskottchens per Community-Abstimmung wurde gestartet

Wichtige Merkmale von Angular v20

In den vergangenen Jahren hat Angular mit signalbasierter Reaktivität, Zoneless-Apps und mehr große Veränderungen vorangetrieben
In Angular v20 liegt der Fokus auf der Stabilisierung laufender Funktionen und der Verbesserung der Developer Experience

Die APIs für Signals, computed, input und view queries haben den stabilen Status erreicht
Auch die APIs effect, linkedSignal und toSignal wurden stabilisiert, wodurch zuverlässiges asynchrones State-Management möglich wird
Erfolgsgeschichten aus großen Diensten wie Google und YouTube wurden geteilt, darunter eine 35%ige Verbesserung der Eingabelatenz

Mit der API resource werden asynchrone Anfragen und die Verarbeitung von Streaming-Daten abhängig von Signal-Änderungen einfacher
httpResource unterstützt signalbasierte HTTP-Anfragen, sodass sich Anfrageergebnisse direkt in Signals verwenden lassen
Verschiedene Streaming-Datenmuster wie WebSocket lassen sich einfach mit Signals verwalten

In SSR-Umgebungen sind die Standard-Handler von Node.js für unhandledRejection und uncaughtException integriert
Auf der Client-Seite ist globales Error-Listening mit provideBrowserGlobalErrorListeners möglich
Es wird eine Anleitung bereitgestellt, um das zone.js-Polyfill aus angular.json zu entfernen und in den Zoneless-Modus zu wechseln

Incremental Hydration und route-spezifische Rendering-Modi wurden stabilisiert
Nur benötigte UI wird beim Eintritt in den Viewport heruntergeladen und hydriert, wodurch der JS-Traffic minimiert wird
Für jede Route lassen sich verschiedene Rendering-Modi wie SSR/CSR/Prerender konfigurieren

In Zusammenarbeit mit Chrome DevTools wurde ein eigener Performance-Track für Angular bereitgestellt, mit dem sich internes Framework-Rendering, Events, Change Detection und mehr in Echtzeit nachvollziehen lassen
Verbesserte APIs für dynamische Erstellung mit createComponent, Anwenden von Direktiven und signalbasierte Bindings
Unterstützung für den Exponentialoperator(**), den in-Operator und untagged template literals in Templates
Erweiterte Diagnosefunktionen für nicht aufgerufene @for trackFn, falsche Nutzung von nullish coalescing und fehlende Eingaben bei strukturellen Direktiven

Auf Basis von Erfahrungen aus 10 Jahren wurde der Style Guide vereinfacht und modernisiert
Suffixe für Datei-/Klassennamen werden standardmäßig nicht mehr erzeugt, und statt HostBinding/HostListener wird das host-Objekt empfohlen
Mit der neuen Option typeCheckHostBindings lassen sich Binding-Fehler in Echtzeit erkennen

Debugging-Funktionen für Incremental Hydration und deferrable view wurden zu Angular DevTools hinzugefügt
Als Ersatz für Karma wird vitest unterstützt, außerdem wurden Watch-Modus und Browser-Tests experimentell eingeführt
Die Button-Komponente von Material entspricht nun der M3-Spezifikation; zudem wurden Terminologie, Animationen und Motion-Control verbessert

Einführung von llms.txt, damit LLMs aktuellen Angular-Code besser lernen können, sowie Bereitstellung von Open-Source-Beispielen und Leitfäden
Leitfäden zur Integration mit Genkit, Vertex AI und mehr, praxisnahe Livestreams und Best Practices wurden veröffentlicht

Der in v17 eingeführte integrierte control flow ist in vielerlei Hinsicht überlegen, etwa bei Intuitivität, Typsicherheit und Performance
*ngIf, *ngFor und *ngSwitch werden in v22 vollständig entfernt; ein Schematic zur Code-Migration wird bereitgestellt

Kandidaten für ein offizielles Angular-Maskottchen zur Stärkung von Identität und Community-Symbolik wurden vorgestellt, ein RFC wurde eröffnet
Vorgeschlagen wurden unter anderem ein vom Logo inspirierter schildförmiger Charakter und ein Anglerfish-Charakter
Die endgültige Auswahl erfolgt per Community-Abstimmung und Feedback; Namensvorschläge sind ebenfalls möglich

Mit v20 werden große Funktionen wie Reaktivität, Zoneless und Incremental Hydration weiter verfeinert und stabilisiert
Weitere größere Projekte wie Selectorless, signal-forms, Verbesserungen bei Unit-Tests und das Maskottchen sind in Vorbereitung
Die weitere Entwicklungsrichtung soll durch aktive Einbindung des Community-Feedbacks festgelegt werden