Angular 22, veröffentlicht am 3. Juni 2026, ist die neueste stabile Version von Rahmen zum Zeitpunkt des Verfassens dieses Artikels. Im Vergleich zu Angular 21 (November 2025, das hatte in dieser Version zonenlos zum Standard gemacht und Signal Forms als experimentelle API eingeführt Konsolidiert alles, was sich noch in der Entwicklervorschau befand, zu einer stabilen, produktionsbereiten Lösung: Signalformen, Resource API und Angular Aria werden offiziell in der Produktion nutzbar, die Standardeinstellungen einiger APIs ändern sich hin zu moderneren Mustern und es kommt eine erste Ebene von KI-Tools, die in die CLI integriert sind.
Überprüfen Sie wie immer bei einer aktuellen Version die genaue installierte Version und die Versionshinweise
offiziell vor der Planung eines Upgrades in der Produktion: ng-Version und npm-Ansicht
@angular/core-Versionen geben den tatsächlichen Status Ihres Projekts und der NPM-Registrierung zurück.
zuverlässiger als jede statische Zusammenfassung.
Kurzübersicht
- Stabile Signalformen: Das signalbasierte Formularsystem, experimentell in Version 21, ist jetzt produktionsbereit.
- Resource API stabil:
resource(),rxResource()undhttpResource()gehen von experimentell zu stabil. - Angular Aria stabil: Paket
@angular/ariafür Barrierefreiheitsmuster wechselt von der Entwicklervorschau zur allgemeinen Verfügbarkeit. - OnPush als Standard: Neue Komponenten verwenden
OnPushanstelle vonEagerzur Änderungserkennung. - API als Standard für HttpClient abrufen: ersetzt
- KI-Tools im CLI: Angular-Kenntnisse und experimentelle WebMCP-Unterstützung für Codierungsagenten.
- TypeScript 6 erforderlich: Mindestanforderung erhöht, Knoten 20 wird nicht mehr unterstützt (mindestens Knoten 22).
Detailfunktion
Signalformen: von experimentell bis stabil
Signal Forms kombiniert die starke Typisierung traditioneller reaktiver Formen mit granularer Reaktionsfähigkeit
von Signal, wodurch ein Großteil des Boilerplates von FormGroup/FormControl entfällt.
In dieser Version kommen die Validatoren minDate()/maxDate() an, native Entprellung
auf Unschärfeereignisse und eine getError()-Methode, um gezielte Fehler ohne zu beheben
Durchlaufen Sie den gesamten Formularbaum.
// Signal Forms — validazione con debounce sul blur, stabile da v22
const form = signalForm({
email: field('', { validators: [required(), email()] }),
});
debounce(form.email, 'blur', 300);
Ressourcen-API: Reaktiver Datenabruf
// httpResource() — fetching dichiarativo, nessun switchMap manuale
userResource = httpResource(() => `/api/users/${this.userId()}`);
// userResource.value(), userResource.isLoading(), userResource.error() sono Signal reattivi
Neu in dieser Version: eine chain()-Methode zum Zusammenstellen voneinander abhängiger Ressourcen
andererseits ohne manuelles Verschachteln von effect() und SSR-seitige Cache-Unterstützung über
eine id-Option, nützlich, um doppeltes Abrufen zwischen Rendering-Server und Hydration-Client zu vermeiden.
OnPush standardmäßig und Fetch API standardmäßig
// Da Angular 22, un componente senza changeDetection esplicito è OnPush per default
@Component({ selector: 'app-widget', template: `...` })
export class WidgetComponent {} // equivalente a changeDetection: ChangeDetectionStrategy.OnPush
HttpClient verwendet die Fetch-API anstelle von XMLHttpRequest, ohne dass dies erforderlich ist
withFetch() explizit (zum Entfernen jetzt veraltet); Seien Sie vorsichtig, wenn Sie
Der Code hängt für den Upload von reportProgress ab, da der Fortschritt in gemeldet wird
Das Hochladen wird von der Fetch-Implementierung nicht unterstützt und muss mit den neuen behandelt werden
reportUploadProgress/reportDownloadProgress.
@Service Decorator und injectAsync()
// @Service — scorciatoia per @Injectable({ providedIn: 'root' }), richiede inject() non constructor DI
@Service()
export class NotificationService {
private readonly http = inject(HttpClient);
}
// injectAsync() — lazy loading di un servizio via dynamic import, con prefetch opzionale
const analytics = await injectAsync(() => import('./analytics.service'), { prefetch: 'onIdle' });
Angular Aria: Barrierefreiheit als Infrastruktur
@angular/aria, jetzt allgemein verfügbar, bietet Anweisungen für die Verarbeitung
automatisch ARIA-Attribute, Tastaturnavigation und Fokusverwaltung für zusammengesetzte Muster
(Combobox, Tab, Tree) – der Entwickler konzentriert sich auf visuelles Design und Geschäftslogik, nicht
zur manuellen Neuimplementierung des ARIA Authoring Practices Guide für jede Komponente.
Breaking Changes und Deprecations
- TypeScript 6 erforderlich: 5.9 und früher werden nicht mehr unterstützt – aktualisieren Sie TypeScript, bevor Sie
ng update. ausführen
- Knoten 20 entfernt: Unterstützt wird mindestens Knoten 22 (Knoten 26 wird unterstützt).
touchedin Signalformen geändert: vom Modell zum Eingabe-/Ausgabepaar (touchedEingabe,touch()Ausgabe) – direkte Auswirkung auf den Code, der gelesen/geschriebenberührtals Modell.markAsTouched()markiert jetzt standardmäßig Nachkommen: Verwenden Sie{ skipDescendants: true }, um das vorherige Verhalten beizubehalten, wenn Ihr Code es angenommen hat.- Router:
canMatcherfordert einen dritten obligatorischen Parameter (currentSnapshot) – vorhandene Guards müssen in der Signatur aktualisiert werden. paramsInheritanceStrategyjetzt'always'standardmäßig (war'emptyOnly'): Überprüfen Sie, ob Ihr Routing davon abhängt das alte implizite Verhalten.- Optionale Verkettung in Vorlagen ändert die Semantik:
project?.authorgibt jetztundefiniertanstelle vonnullbei Nullwerten zurück, ausgerichtet an TypeScript. withIncrementalHydration()veraltet, da es jetzt das Standard-SSR ist; Verwenden SiewithNoIncrementalHydration(), wenn Sie explizit das alte Verhalten benötigen.
Werkzeuge und Bau
# Migrazione automatica dei test da Karma a Vitest
ng generate migrate-karma-to-vitest
# Build con ottimizzazione dei chunk abilitata di default (disattivabile via env var)
NG_BUILD_OPTIMIZE_CHUNKS=false ng build --configuration production
Rollup bleibt der Standardoptimierer, Rolldown ist jedoch als Option verfügbar
NG_BUILD_CHUNKS_ROLLDOWN für diejenigen, die noch kürzere Bauzeiten erleben möchten.
Die Umgebungsvariable PORT hat jetzt Vorrang vor dem Flag --port für den Entwickler
Server, nützlich für containerisierte CI/CD-Setups.
Leistung und Paket
OnPush reduziert standardmäßig die Anzahl unnötiger Änderungserkennungszyklen bereits auf
Starten Sie mit neuen Gerüstprojekten, ohne dass eine manuelle Konfiguration erforderlich ist. Die Optimierung von
Der im Produktions-Build standardmäßig aktivierte Chunk reduziert das anfängliche Bundle im Vergleich weiter
zu früheren Versionen. Messen Sie immer vorher/nachher mit Standardinstrumenten:
ng build --configuration production --stats-json
npx webpack-bundle-analyzer dist/*/stats.json
npx lighthouse http://localhost:4200 --view
Staatsmanagement und Reaktivität
Da Signal Forms und Resource API beide stabil sind, lautet das empfohlene Muster für neuen Code jetzt
Signal-first: lokaler Zustand mit signal()/computed(), Datenabruf mit
resource()/httpResource(), Formular mit Signalformen. RxJS bleibt voll erhalten
unterstützt und notwendig für komplexe Streams (WebSockets, mehrere kombinierte Ereignisse), ist aber nicht mehr der
impliziter Standard für jede neue Komponente. Experimentelle Neuheit in dieser Version: debounced(),
eine Funktion, die eine entprellte Version eines Signals erstellt und ein Resource-Objekt zurückgibt.
// debounced() — sperimentale, debounce di un Signal senza RxJS
const query = signal('');
const debouncedQuery = debounced(query, { delay: 300 });
Serverseitiges Rendering und Edge
Inkrementelle Flüssigkeitszufuhr ist jetzt das standardmäßige SSR-Verhalten (nicht mehr per Opt-in möglich).
withIncrementalHydration(), was eigentlich gerade deshalb veraltet ist, weil es überflüssig ist).
provideServerRendering() akzeptiert jetzt ein Optionsobjekt, einschließlich
maxResponseBodySize um die Größe der serverseitig gerenderten Antwort zu begrenzen –
nützlich auf Edge-Plattformen mit strengen Nutzlastbeschränkungen pro Einzelfunktion.
// provideServerRendering con opzioni — utile su piattaforme edge con limiti di response size
provideServerRendering({ maxResponseBodySize: 5_000_000 });
Kompatibilität und Abhängigkeiten
| Angular | TypeScript | Node | Note |
|---|---|---|---|
| 21 | 5,6+ | 20 / 22 | Zonenlose Standardeinstellung, experimentelle Signalformen |
| 22 | 6,0 Minimum | 22 / 26 (20 entfernt) | Signalformen/Ressourcen-API/Aria stabil |
Überprüfen Sie bei Angular Material, NgRx und anderen Ökosystembibliotheken immer die Kompatibilität
vor dem Upgrade in den peerDependencies des jeweiligen Pakets deklariert:
npm view @angular/material peerDependencies. Bibliotheken, die stark darauf angewiesen sind
Traditionelle FormControl/FormGroup bleiben kompatibel – Signalformen
Koexistiert mit älteren reaktiven/vorlagengesteuerten APIs und ersetzt diese nicht zwangsweise.
Migrations- und Betriebsplan
# Verifica prima di aggiornare
ng version
npm outdated
# Aggiornamento a v22 con dry-run preventivo
ng update @angular/core@22 @angular/cli@22 --dry-run
ng update @angular/core@22 @angular/cli@22
Mindest-Checkliste vor dem Upgrade: TypeScript bereits bei 6.x, Node bereits bei 22+, dedizierter Branch, Build und Test Grün als Grundlinie. Führen Sie nach dem Update die gesamte Testsuite und einen vollständigen Produktions-Build aus bevor Sie mit einer optionalen Übernahme (Signalformen, Aria) für vorhandene Komponenten fortfahren – die Versionsaktualisierungen und die Einführung neuer APIs sind zwei unterschiedliche Aktivitäten und sollten nicht in einer zusammengefasst werden gleiches Commit. Für das Rollback bleibt das Git-Tag vor dem Upgrade der schnellste und zuverlässigste Mechanismus.
Testen und Qualitätssicherung
// TestBed.getLastFixture() — nuova utility per recuperare l'ultima fixture creata
it('renderizza correttamente', () => {
TestBed.createComponent(WidgetComponent);
const fixture = TestBed.getLastFixture();
expect(fixture.nativeElement.textContent).toBeTruthy();
});
Vitest bietet jetzt native Unterstützung für Zone.js über zone.js/plugins/vitest-patch und die
Die automatische Migration migrate-karma-to-vitest deckt die meisten Karma-Projekte ab
vorhanden; Für diejenigen, die bereits auf Jasmine/Vitest migriert sind, wird bei der Migration das Flag --fake-async angezeigt
refactor-jasmine-vitest deckt timerbasierte asynchrone Testmuster ab.
Sicherheit und Best Practices
In dieser spezifischen Version gibt es keine Standardänderungen in Bezug auf Cookies oder CSP, sondern die Änderung bei Fetch
Die API für HttpClient ist einen Blick wert: wenn Ihre Anwendung von Verhalten abhängt
spezifisch für XMLHttpRequest (z. B. benutzerdefinierte Header bei Cross-Origin-Anfragen), testen Sie i explizit
Authentifizierungsabläufe nach dem Upgrade. Die verbleibenden Best Practices (HttpOnly/SameSite zu Cookies
Sitzung, restriktiver CSP) ändern sich nicht und müssen unabhängig von der Angular-Version beibehalten werden.
Anwendungsfälle
Fall 1: Unternehmens-Dashboard mit komplexen Formularen
Ein Unternehmens-Dashboard mit über 40 Formularen, die auf verschiedene Module verteilt sind, hat Signal Forms sui übernommen neue Feature-Formulare nach dem Upgrade auf v22, wobei alte Formulare auf traditionellen reaktiven Formularen beibehalten werden dank der vollständigen Koexistenz der beiden APIs. Ergebnis: Reduzierung des Boilerplates um etwa 30 % bei Neugeräten Form, Validierung mit nativer Entprellung, wodurch benutzerdefinierter handgeschriebener Entprellungscode eliminiert wurde RxJS zuvor.
Fall 2: App mit strengen Barrierefreiheitsanforderungen
Eine öffentliche Anwendung, die den WCAG AA-Anforderungen unterliegt, hat die benutzerdefinierte Implementierung von ersetzt
Combobox und Tab (mit manuell geschriebener ARIA-Verwaltung) mit @angular/aria nach dem
Stabilisierung in v22. Ergebnis: Automatisches Barrierefreiheitsaudit ohne manuellen Eingriff bestanden
Ergänzung zu migrierten Mustern, Reduzierung des spezifischen Fokus-/Tastaturverwaltungscodes für
Bestandteil von insgesamt etwa 200 Zeilen.
FAQ
Müssen Sie alle Formulare sofort auf Signal Forms migrieren?
Nein, Signalformulare existieren neben älteren reaktiven/vorlagengesteuerten Formularen; Migration kann schrittweise und opportunistisch erfolgen.
Unterbricht OnPush standardmäßig vorhandene Komponenten?
Nein, die Standardeinstellung gilt nur für neue Komponenten ohne explizite changeDetection; Vorhandene Komponenten behalten die bereits deklarierte Strategie bei.
Soll ich Node vor dem Upgrade von Angular aktualisieren?
Ja, Node 20 wird in Version 22 nicht mehr unterstützt – bitte überprüfen und aktualisieren Sie Node auf 22+, bevor Sie ng update.
Unterbricht die Fetch-API standardmäßig vorhandene HTTP-Aufrufe?
In den meisten Fällen nein, aber überprüfen Sie die Upload-Fortschrittsberichte, die die neuen dedizierten Optionen anstelle der alten reportProgress.
Angular Aria ersetzt Angular Material?
Nein, sie ergänzen sich: Aria bietet Verhaltenszugänglichkeitsmuster, Material stellt bereits stilisierte visuelle Komponenten bereit.
Was passiert, wenn ich TypeScript nicht auf 6 aktualisiere?
ng-Update auf v22 schlägt fehl oder meldet Inkompatibilität: TypeScript 6 ist eine obligatorische Anforderung, nicht optional.
Ersetzt Vitest unbedingt Karma?
Nicht sofort erforderlich, aber Karma wird im Angular-Ökosystem nicht mehr unterstützt. Durch die automatische Migration ist der Wechsel zu Vitest risikoarm.
Sind AI/MCP-Tools für die Verwendung von Angular 22 erforderlich?
Nein, es ist optional und für diejenigen konzipiert, die KI-gestützte Codierungsagenten verwenden; hat keinen Einfluss auf den Standardbetrieb der Anwendung.
So überprüfen Sie
- Überprüfen Sie Version und Abhängigkeiten:
ng-Versionundnpm veraltet. - Vollständiger Produktions-Build:
ng Build – Konfiguration Produktion. - Führen Sie die gesamte Testsuite aus:
ng test(odervitest run, wenn bereits migriert). - Manueller Rauchtest für kritische Flüsse (Authentifizierung, Hauptformulare) nach dem Upgrade.
- Vollständiger E2E-Test:
npx cypress runoder gleichwertig. - Bundle-Größe und Leistung prüfen: Bundle-Analysator plus
npx-Leuchtturm http://localhost:4200, verglichen mit der Basislinie vor dem Upgrade.
Fazit
Angular 22 führt weniger zu einem Paradigmenwechsel als vielmehr zu einer Konsolidierung: Signalbasierte APIs sind geboren in früheren Versionen (Signal Forms, Resource API) endlich stabil und einsatzbereit In der Produktion verschieben sich die Standardeinstellungen hin zu leistungsstärkeren Mustern (OnPush, Fetch API) und es kommt zum ersten Mal Tooling-Schicht, die für die KI-gestützte Entwicklung konzipiert ist. Für die meisten Projekte Ein Upgrade von v21 ist risikoarm, wenn TypeScript und Node bereits auf dem neuesten Stand sind; die Annahme neuer Die API bleibt jedoch optional und kann nach dem Versions-Upgrade schrittweise fortgeführt werden.
Möchten Sie eine detaillierte Migrationscheckliste für Ihr Projekt oder eine Bewertung? des Upgrade-Aufwands? Fordern Sie ein technisches Audit an: In wenigen Stunden Analyse ist dies möglich Schätzen Sie Risiken, relevante Änderungen für Ihre Codebasis und Einführungsprioritäten für neue APIs ein.