Angular v22 angekündigt

 (blog.angular.dev)
2 Punkte von GN⁺ 3 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • Angular v22 erweitert den Ablauf für AI-Agenten um Tools zur Steuerung des Entwicklungsservers in Angular MCP, Angular Agent Skills, experimentelles WebMCP sowie Angular-Erstellungs-Workflows in Google AI Studio und Gemini Canvas
  • Mit dem Ziel, Stabilität und Entwicklerfreundlichkeit zu verbessern, werden Signal Forms, Angular Aria sowie resource und httpResource von Experimental-/Preview-Status in einen produktionsreifen Zustand überführt
  • Signal Forms ist eine deklarative Formular-API, die Reactive Forms, stark typisierte Formulare, vorlagenbasierte Formulare und die Reaktivität von Signals kombiniert; ergänzt wurden Dokumentation, Community-Feedback sowie Unterstützung für Angular Material und Angular Aria
  • Verbesserungen bei API und Templates umfassen die Integration der Navigation API im Router, Steuerung der Bereinigung von Route-Ressourcen, Unterstützung für @Service und injectAsync sowie Kommentare in HTML-Elementen, Spread/Rest, @switch-Prüfung und Arrow Functions in Templates
  • Angular v22 stärkt mit dem standardmäßigen OnPush für neue Apps, der Umbenennung von ChangeDetectionStrategy.Eager, einer Developer Preview von @boundary im 3. Quartal 2026 sowie der geplanten Einstellung der Unterstützung für Webpack-basierte Tools und dem Fokus auf TSGo die Grundlage für die Zukunft

In produktionsreifen Zustand überführte Funktionen

  • Signal Forms ist eine reaktive, zusammensetzbare und deklarative Formular-API, die die Stärken von Reactive Forms, stark typisierten Formularen, bevorzugten Elementen vorlagenbasierter Formulare und der Reaktivität von Signals kombiniert
  • Seit dem Release von v21 wurden der Formularleitfaden auf angular.dev aktualisiert, Community-Feedback und Issues berücksichtigt sowie die Integration mit Angular Material und Angular Aria unterstützt
  • Angular Aria sind Accessibility-Primitiven, die so konzipiert sind, dass Entwickler Styling und Business-Logik übernehmen, während UI-Direktiven und Muster die Barrierefreiheit behandeln; in v22 sind sie produktionsreif
  • Die 12 UI-Muster von Angular Aria decken gängige Accessibility-Muster ab und bieten eine stabilisierte API, vollständige Unterstützung für Signal Forms sowie Test-Harnesses
  • Die asynchrone reaktive API behandelt mit resource asynchrone Ressourcen mit einer signalbasierten Nutzbarkeit und verarbeitet mit httpResource das Abrufen von HTTP-Daten in einem stärker deklarativen Modell
  • resource und httpResource können in v22 in produktiven Apps verwendet werden; die Nutzung ist im offiziellen Leitfaden beschrieben

AI-Entwicklung und Agenten-Workflows

  • Angular v22 erweitert die Abläufe für AI-native Anwendungen in drei Bereichen: Agenten-Tools zum Schreiben von Code, Browser-Agenten-Tools und AI-Entwicklungsplattformen
  • devserver.wait_for_build von Angular MCP unterstützt Agenten dabei, eine Anwendung zu bauen, die Ausgabe zu prüfen und auf dieser Basis die nächsten Schritte zu bestimmen; auf Grundlage von Codefehlern in den Build-Logs lassen sich Self-Healing-Schleifen aufbauen
  • devserver.start und devserver.stop starten bzw. stoppen den Entwicklungsserver; diese Tools werden zusammen mit Test- und End-to-End-Tools in v22 in den Stable-Status überführt
  • Angular MCP erweitert fortlaufend seine Werkzeugliste für moderne Angular-App-Entwicklung, darunter ai_tutor, modernize und onpush_zoneless_migration
  • angular-developer aus den Angular Agent Skills liefert Modellen Richtlinien für moderne Angular-Entwicklung einschließlich neuer Funktionen wie Angular Aria und Signal Forms; die Datei umfasst weniger als 140 Zeilen und nutzt eine progressive Offenlegung, bei der Codebeispiele und Referenzdateien bei Bedarf geladen werden
  • angular-new-app unterstützt Nutzer, die Angular erstmals in einer Agenten-Umgebung erkunden, beim Einrichten einer lokalen Angular-Coding-Umgebung; diese Skills können in AI-Entwicklungstools wie Antigravity oder in Agenten-Workflow-Umgebungen verwendet werden
  • Die Contributor Skills helfen dabei, das notwendige Mental Model für die Entwicklung von Funktionen innerhalb der Angular-Codebasis zu verstehen, und sind sowohl für die erste Pull Request als auch für erfahrene Teammitglieder wertvoll
  • Das experimentelle WebMCP ermöglicht es, strukturierte Tools zu erstellen und im Browser für Agenten bereitzustellen, wodurch die Notwendigkeit direkter DOM-Interaktionen sinkt; unterstützt werden Tool-Definitionen für die gesamte App, Routes und Services sowie die dynamische automatische Tool-Erstellung auf Basis von Signal Forms
  • Die Dokumentation zur WebMCP-Integration ist unter angular.dev/ai/webmcp verfügbar
  • Google AI Studio und Gemini Canvas unterstützen Builder ohne traditionellen Coding-Hintergrund beim Start Angular-basierter Projekte; in der integrierten Coding-Sandbox der Gemini-Web-App lassen sich vollständige Anwendungen im Browser erstellen
  • Im Gemini-Workflow wird durch die Angabe von „Angular“ im Prompt eine Angular-App erzeugt; danach kann sie im Browser manuell bearbeitet, gemeinsam mit der AI weiter verfeinert oder um eine Firebase-Integration ergänzt werden
  • In Google AI Studio steht ein ähnlicher Workflow zur Verfügung: Angular im Configuration Panel auswählen, den Prompt starten und nach der Generierung per Chat weitere Funktionen hinzufügen bis hin zur Bereitstellung

Router- und Dependency-Injection-APIs

  • Die Integration der Navigation API richtet den Router stärker an der nativen Navigation API des Browsers aus und ermöglicht die Steuerung von App-Navigation mit weniger Boilerplate
  • Der Router kann alle Navigation Requests automatisch abfangen, einschließlich RouterLink und standardmäßiger Anchor-Tags
  • Durch Nutzung des nativen Scroll-Verhaltens gelangen Nutzer bei Zurück-/Vorwärts-Navigation an die erwartete Position, ganz ohne benutzerdefinierte Scroll-Management-Logik und ohne Auswirkungen auf die Bundle-Größe
  • Durch die direkte Anbindung an den nativen Navigation-Lifecycle des Browsers lassen sich globale Ladeindikatoren und präzise Accessibility-Ankündigungen bei Seitenübergängen einfacher umsetzen
  • Die Steuerung der Routen-Bereinigung behandelt Speicherverwaltung expliziter mit den beiden Funktionen withExperimentalAutoCleanupInjectors und destroyDetachedRouteHandle
  • withExperimentalAutoCleanupInjectors zerstört automatisch Dependency Injectors, die mit nicht mehr aktiven Routen verbunden sind, und räumt so inaktive Route-Level-Provider und Ressourcen auf
  • destroyDetachedRouteHandle ist die offizielle öffentliche API, um bei Verwendung einer benutzerdefinierten RouteReuseStrategy Komponenten in einem Detached Route Handle sauber zu zerstören
  • Der Decorator @Service ersetzt in den meisten Anwendungsfällen das Muster @Injectable({ providedIn: 'root' }); für tiefere Konfigurationen oder Constructor Injection kann weiterhin @Injectable genutzt werden
  • injectAsync unterstützt asynchrone Dependency Injection für Services und ermöglicht Code Splitting sowie On-Demand-Laden; der Service muss automatisch bereitgestellt werden, was @Service übernimmt
  • Im Beispiel zu injectAsync wird der Service ReportExporter erst geladen, wenn er erstmals verwendet wird; auch Prefetch-Einstellungen wie prefetch: onIdle sind möglich
  • Die Nutzung ist in der offiziellen Dokumentation zu injectAsync beschrieben
  • Weitere Verbesserungen umfassen vollständige Kompatibilität mit TypeScript 6 sowie Performance-Verbesserungen an Template-Pipeline und Runtime-Effizienz

Template-Erlebnis und Change Detection

  • Innerhalb von HTML-Elementen können Kommentare auf Property- und Binding-Ebene verwendet werden, was die Lesbarkeit und Klarheit von Templates erhöht; auch das Umschalten von Kommentaren in VS Code wird unterstützt
  • Angular entfernt Host-Direktiven, die auf demselben Element mehrfach gematcht werden, automatisch als Duplikate
  • Wenn eine Direktive sowohl im Template als auch als Host-Direktive gematcht wird, hat der Template-Match Vorrang; die Input-/Output-Zuordnung der Host-Direktive wird zusammengeführt
  • Wenn ein Input oder Output unter mehreren Namen exponiert wird, erzeugt Angular einen Fehler, um Namenskonflikte zu verhindern
  • In Templates kann Spread/Rest-Syntax verwendet werden; sie ist auf Objektliterale, Array-Literale und Funktionsaufrufe anwendbar
  • @switch erlaubt es, dass mehrere @case denselben Output teilen, wodurch Codeduplizierung reduziert wird
  • In einem @switch-Block mit Union-Typen kann mit @default never; ein Compile-Time-Fehler ausgelöst werden, wenn Werte nicht behandelt wurden
  • Inline-Funktionen in Templates können in Form von Arrow Functions verwendet werden; sie eignen sich für kurze und einfache Funktionen, während komplexe oder lange laufende Funktionen nicht im Template liegen sollten
  • In neuen Anwendungen ist OnPush die standardmäßige Change-Detection-Strategie und entspricht dem Ziel von zoneless als Standard sowie Performance by default
  • Der bisherige Standardwert ChangeDetectionStrategy.Default wird in ChangeDetectionStrategy.Eager umbenannt, um das Verhalten im Change-Detection-Zyklus klarer zu machen

Error Boundaries, Deprecations und Ausblick

  • @boundary ist eine neue API zur Implementierung von Error Boundaries in Angular-Templates; sie kann Fehler aus dem umschlossenen Codeblock abfangen und Fallback-Content festlegen
  • Ziel ist es, in besonders kritischen Abläufen wie dem Checkout im E-Commerce das Risiko zu verringern, dass der Ausfall einer einzelnen Komponente die gesamte Seite lahmlegt
  • @boundary soll im 3. Quartal 2026 als Developer Preview verfügbar werden
  • Webpack-Support, Builder aus @angular-devkit/build-angular, @ngtools/webpack und Ähnliches werden in v22 als deprecated markiert
  • Angular konzentriert sich auf TSGo-Support im Application Builder; weitere Details zu den Deprecations finden sich im Angular CHANGELOG

Verwandte Beiträge

1 Kommentare

 
GN⁺ 3 시간 전
Hacker-News-Kommentare

  • Ich baue gerade mit Angular v21 eine ziemlich komplexe App, und die kognitive Last beim Erstellen und Verwalten von Komponenten, Zustand und Datenfluss ist gering, daher ist die Erfahrung sehr gut.
    Dank Signals und Signal Stores ist es sehr einfach geworden, und ich habe alles von Hand ohne KI-Coding-Tools geschrieben.

  • Ich muss zugeben, dass Angular inzwischen wirklich angenehm zu benutzen ist.
    Schade ist nur, dass das Ökosystem etwas holprig ist, aber zum Glück bringt das Framework von Haus aus schon sehr viel mit.

    • Ich habe dieselbe Erfahrung gemacht.
      Ich wünschte, Angular würde seinen ungewöhnlichen Compiler aufgeben, der stark an tsc gekoppelt ist, und einen stärker plug-in-fähigen Ansatz wählen, der mit jedem TypeScript-Compiler funktioniert.
      Die Cold-Build-Zeiten für Apps und Unit-Tests sind immer noch nicht besonders gut, aber mit Coding-Agenten fällt einem diese Last etwas weniger auf.
    • Mich würde interessieren, was im Ökosystem holprig ist.
      Ich hatte nie Probleme, Pakete zu finden, und die meisten Pakete folgen dem Signal-Flow inzwischen ebenfalls gut.
    • Ich frage mich, ob Projekte sich immer noch für Dinge wie RxJS entscheiden, sodass sich die Schichten im Code stapeln und das Debugging unerquicklich wird.
      Oder ob im Angular-Ökosystem inzwischen wieder Vernunft eingekehrt ist.

  • Ich habe vor Kurzem ein ziemlich komplexes Angular-Projekt von v14 auf v21 angehoben.
    Über einige Jahre hinweg fühlte sich die Angular-Entwicklung etwas langsam an, aber wenn man die Veränderungen zwischen diesen Versionen auf einmal sieht, wirkt es fast wie ein komplett neues Framework.

  • Angular Aria sieht wirklich großartig aus.
    Die Dokumentation deckt sogar komplexe Szenarien wie Autovervollständigung gut ab, deshalb möchte ich es schnell ausprobieren, um zu sehen, ob es die screenreadertaugliche Autovervollständigung ersetzen kann, die ich früher selbst bauen musste.

    • Vielleicht habe ich etwas falsch verstanden, aber als ich unter https://angular.dev/guide/aria/overview#showcase die Tastaturbedienung ausprobiert habe, war die Navigation mit Pfeiltasten statt mit dem viel üblichteren tab/shift+tab eingerichtet.
      Sogar die eigenen Dokumentations-Tabs direkt über diesem Beispiel verwenden tab/shift+tab für den Fokuswechsel.

  • Auf diese Funktion freue ich mich wirklich.
    Ich wollte signal-forms und resources schon nutzen, als sie noch experimentell waren, und seit ich auf Signals umgestiegen bin, gibt es für mich kein Zurück mehr.
    Dass man für Forms RxJS verwenden musste, war ein großer Schmerzpunkt.

    • Könnte jemand Signals etwas genauer erklären?
      Ist das ähnlich wie das Signal-Paradigma in Game Engines wie Godot, bei dem Komponenten unabhängig von der Tiefe Signale aussenden und andere Komponenten sie abonnieren, oder ist es etwas völlig anderes?

  • Vor React habe ich Angular gern benutzt, und das war damals eine ziemlich gute Zeit, aber ehrlich gesagt vergesse ich inzwischen fast, dass Angular überhaupt existiert.
    Das soll kein Lob für React sein; heutzutage gefällt mir eher der htmx-Ansatz.
    Es fühlt sich nur so an, als habe sich der Wettbewerb inzwischen dahin verlagert, welches Framework oder welche Sprache von Agenten besser gehandhabt wird und wie gut statische Analyse oder Tools auf Compiler-Ebene Fehler abfangen können.

  • Ich mag Angular, weil es sich ein bisschen wie Django anfühlt.
    Alles, was man braucht, ist enthalten, daher ist es leicht zu verwenden.

    • Da fragt man sich fast, ob man nicht einfach Django verwenden sollte.
      Oder ein schnelleres Backend mit Templates und Server-Side Rendering nehmen und daran htmx hängen, um eine Single-Page-App-artige Erfahrung zu bekommen, ganz ohne den Wahnsinn des kaputten JS-Ökosystems.

  • Dank Angular hat mir meine Programmierkarriere Spaß gemacht, und es fühlte sich überhaupt nicht wie Arbeit an.
    Es gibt kaum etwas Besseres, als in einer Sprache zu arbeiten, die man mag, dabei dazuzulernen und auch noch dafür bezahlt zu werden.

  • Ich habe Angular eine ganze Weile nicht benutzt.
    Als jemand, der andere JavaScript-Frameworks wie Vue, React und Svelte verwendet, frage ich mich, was ich verpasse.
    Mich interessiert, warum sich Leute für Angular statt für andere große Frameworks entscheiden.

    • Im Allgemeinen passt Angular am besten, wenn man altmodische Anwendungen als Websites bauen möchte.
      Besonders dann, wenn man JavaScript und Webentwicklung nicht besonders mag und das Backend als den eigentlichen Hauptteil betrachtet.

  • Wie bei import {signal} from "@angular/core" und import {form} from "@angular/forms/signals" kommt signal aus core, während form aus forms/signals kommt.
    Vermutlich gibt es dafür einen terminologischen Grund, den ich nicht verstehe.
    Davon abgesehen freue ich mich darauf, Angular nach 10 Jahren wieder zu benutzen; es sieht ziemlich gut aus.

    • Signals sind die grundlegende Datenstruktur von Angular, deshalb befinden sie sich in core.
      Signalbasierte Forms sind Teil des Forms-Moduls; wenn man also keine Forms verwendet, holt man sich diesen Overhead nicht ins Projekt.
    • Es gibt in Angular viele Möglichkeiten, mit Forms umzugehen.
      Das ist vermutlich der Import für die neuen signalbasierten Forms.