Angular 18 auf 21: Was sich wirklich ändert – und was das für euer Projekt bedeutet

Angular entwickelt sich derzeit rasanter als je zuvor. Von Version 18 zu 21 hat das Framework fundamentale Entscheidungen getroffen und die gewohnten Muster weichen einer deutlich moderneren Architektur.

Was das konkret bedeutet: Zone.js verliert seinen Pflichtplatz, Signals werden zum Standard, und altbekannte Direktiven wie *ngIf sind auf dem Rückzug.

In diesem Beitrag zeigen wir, welche Änderungen wirklich relevant sind, was dringend migriert werden sollte und was noch Zeit hat.

Die SSA SoftSolutions GmbH entwickelt seit 1991 maßgeschneiderte Geschäftsanwendungen, Webportale und digitale Plattformen für mittelständische Unternehmen und Großunternehmen im DACH-Raum. Unsere Leistungen umfassen KI-Integration, individuelle Softwareentwicklung, Digitalisierung und Softwaremodernisierung, wie auch die Migration und Weiterentwicklung von Angular-Anwendungen. Aktuell betreuen wir 10 große Angular-Projekte mit Teams von 3 bis 6 Entwicklern in den Versionen 18 bis 21.

Die Migration auf Angular 21 bewerten wir daher aus unserer täglichen Projektpraxis heraus:

• warum Signals die größte strategische Weichenstellung seit Jahren sind

• welche Breaking Changes mit welchem Aufwand auf euch zukommen

• und wie ihr die Migration sinnvoll priorisiert, ohne das laufende Projekt zu blockieren

 

Angular-Migrationen als Teil moderner Softwareentwicklung

Dabei geht es nicht nur um die Aktualisierung von Framework-Versionen. Unser Ziel ist immer auch bestehende Anwendungen langfristig wartbar, leistungsfähig und zukunftssicher zu gestalten. Angular bildet dabei in vielen Projekten die technologische Grundlage für digitale Geschäftsprozesse, Kundenportale, Serviceplattformen und interne Unternehmensanwendungen.

Unsere Erfahrungen aus zahlreichen Modernisierungsprojekten zeigen, dass kontinuierliche Updates deutlich wirtschaftlicher sind als große Versionssprünge nach mehreren Jahren. Deshalb begleiten wir Unternehmen nicht nur bei einzelnen Migrationen, sondern über den gesamten Lebenszyklus ihrer Software.

 

Der Weg zu Signals-first: Angular 18 -> 21

Eine Evolution in klaren Schritten – kein radikaler Bruch.

Wer Angular-Projekte betreut, kommt an einem Begriff nicht mehr vorbei: Signals. Was in Angular 17/18 als experimentelle Idee eingeführt wurde, ist in Angular 21 kein Experiment mehr, sondern die neue Standardarchitektur.

Dahinter steckt ein fundamentaler Wandel in der Change Detection, also der Frage: Wie weiß Angular, wann es die UI aktualisieren muss?

Bisher hat Angular dafür auf Zone.js gesetzt. Zone.js ist eine Bibliothek, die im Hintergrund auf Klicks, HTTP-Requests und Timer lauscht und Angular dann zur Überprüfung der gesamten Komponentenstruktur veranlasst. Das funktionierte, war aber global und undifferenziert: Angular prüfte immer alles, auch wenn sich kaum etwas geändert hatte.

Mit Signals weiß Angular nun genau, welcher Wert sich geändert hat:

const count =
  signal(0);

count.set(1); //
  Angular aktualisiert nur, was von count abhängt

Change Detection: Zone.js vs. Signals

Wie Angular erkennt, dass die UI aktualisiert werden muss

In Angular 21 ist Zone.js nicht mehr der Default. Wer auf Signals setzt, profitiert von schnellerer, präziserer Renderlogik. Wer weiter auf Zone.js angewiesen ist, muss das explizit konfigurieren.

Das ist die größte strategische Änderung und damit auch die mit dem höchsten potenziellen Migrationsaufwand.

Bestehende RxJS-Services in Richtung Signals migrieren

Für viele Projekte stellt sich die Frage: Was passiert mit den zahlreichen Services, die auf RxJS Observables aufgebaut sind?

Ein offizielles Automigrations-Tool existiert dafür (noch) nicht. Angular bietet aber Brücken-Utilities, die den Übergang deutlich erleichtern:

import { toSignal } from '@angular/core/rxjs-interop';
 
user$ = this.http.get('/api/user');
user = toSignal(user$); // Observable wird zum Signal

Das erlaubt einen schrittweisen Umstieg, ohne alles auf einmal umschreiben zu müssen. Die Empfehlung lautet: Neue Features direkt mit Signals entwickeln und bestehendes schrittweise migrieren.

Control Flow: *ngIf gehört bald der Vergangenheit an

Eine weitere bedeutende Änderung betrifft die Template-Syntax. Die bekannten strukturellen Direktiven wie *ngIf, *ngFor und *ngSwitch sind seit Angular 20 offiziell deprecated. Die neue Control Flow Syntax ist deren Nachfolger:

<!-- Alt -->
<div *ngIf="isLoggedIn">Willkommen</div>
 
<!-- Neu -->
@if (isLoggedIn) {
  <div>Willkommen</div>
}

Die neue Syntax ist klarer lesbar und lässt sich besser mit Signals kombinieren. Zusätzlich bringt sie messbare Performance-Vorteile mit sich. Für die Migration bietet das Angular CLI ein automatisches Hilfsmittel:

ng update @angular/core --name=control-flow-migration

Das nimmt einen Großteil der Arbeit ab. Dennoch sollte man die migrierten Templates nachkontrollieren. Dies ist vor allem bei komplexeren Fällen mit verschachtelten Bedingungen oder dynamischen Variablen empfehlenswert.

NgModules: Das Ende einer langen Ära

NgModules waren lange das organisatorische Herzstück jeder Angular-Applikation. In Angular 21 sind sie weitgehend aus dem Mittelpunkt gedrängt. Standalone Components sind mittlerweile der neue Standard, dagegen sind NgModules kaum noch relevant.

Die gute Nachricht: Angular hat dafür offizielle Migrations-Schematics, die den Großteil der Umstellung automatisieren:

ng generate @angular/core:standalone

Der Aufwand ist überschaubar und der Gewinn spürbar: einfachere Projektstruktur, besseres Tree-Shaking, direktere Nachvollziehbarkeit. Standalone-only ist keine Zukunftsvision mehr, sondern der aktuelle Best-Practice-Standard.

Weitere Änderungen im Überblick

Signal Forms (experimentell)

Angular 21 bringt eine neue, Signals-basierte Forms-API. Diese ist noch experimentell. Für laufende Projekte empfiehlt es sich abzuwarten, bis die API stabil ist.

Smart Styling: NgClass und NgStyle ablösen

Statt [ngClass] und [ngStyle] werden native Class- und Style-Bindings bevorzugt:

<!-- Statt [ngClass]="{active: isActive}" -->

<div [class.active]="isActive"></div>

Der Aufwand ist gering, der Nutzen real: bessere Signals-Kompatibilität und höhere Performance. Ein automatisches Angular-Tool gibt es dafür nicht. Die Stellen lassen sich aber einfach per Projektsuche finden und ersetzen.

AI / MCP Server Integration im CLI

Angular 21 bringt eine native Integration des Angular CLI mit KI-Entwicklungstools über das Model Context Protocol (MCP). Das ermöglicht AI-gestützte Entwicklungsunterstützung direkt im Editor, wie beispielsweise in VS Code mit entsprechenden Extensions.

Angular Material

Bleibt kompatibel mit Angular 21 und basiert weiterhin auf Standalone Components. Es wird schrittweise an Signals und die neue Template-Syntax angepasst. Regelmäßige Updates bleiben wichtig.

Prioritäten für die Migration: Was wann angegangen werden sollte

Nicht alles muss sofort migriert werden. Eine strukturierte Herangehensweise spart Zeit und reduziert Risiken.

Sofort sinnvoll:

• Control Flow migrieren (*ngIf → @if etc.) CLI-Tool ist verfügbar, der Aufwand bleibt überschaubarer

• Standalone-only Architektur durchziehen das offizielle Schematic ist vorhanden

Mittelfristig:

• Signals stärker einsetzen zuerst in neuen Features, dann in bestehenden Services

• Zone.js schrittweise entfernen erst wenn die Signals-Abdeckung ausreichend ist

• NgClass/NgStyle durch native Bindings ersetzen

Noch optional:

• Signal Forms hier sollte bis zur stabilen API abgewartet werden

Migration nach Priorität & Aufwand

Wo sich der Einstig zuerst lohnt und was warten kann.

Was das Upgrade Unternehmen konkret bringt

Für IT-Entscheider zählt weniger die Technologie selbst als die Frage: Warum lohnt sich das Budget für ein Upgrade? Aus unserer Sicht sprechen vier Argumente dafür.

• Performance: Die feingranulare Change Detection mit Signals reduziert unnötige Re-Renderings spürbar bei datenintensiven Oberflächen.

• Wartbarkeit: Standalone Components und die neue Control-Flow-Syntax machen den Code lesbarer und senken die Einstiegshürde für neue Teammitglieder.

• Zukunftssicherheit: Wer auf dem aktuellen Angular-Stand bleibt, erhält weiterhin Sicherheits- und Feature-Updates und vermeidet teure Sprung-Migrationen über mehrere Major-Versionen.

• Technische Schulden: Jede ausgelassene Version vergrößert den späteren Migrationsaufwand. Kontinuierliche Modernisierung hält die Kosten planbar.

• KI-Bereitschaft: Moderne Angular-Architekturen sind eine solide Grundlage, um KI-Funktionen effizient zu integrieren – etwa für intelligente Suche, Dokumentenanalyse oder KI-Assistenten in Fachanwendungen.

 

Das SSA Angular Modernization Framework: Unser Vorgehensmodell für planbare Angular-Migrationen

Eine Migration ist planbar, wenn sie strukturiert abläuft. Unser Vorgehen gliedert sich in sieben Schritte:

1.   Technischer Audit
Bestandsaufnahme von Version, Architektur und kritischen Abhängigkeiten.

2.   Dependency-Analyse
Prüfung von Bibliotheken und Angular Material auf Kompatibilität mit Angular 21.

3.   Control-Flow-Migration
automatisierte Umstellung von *ngIf/*ngFor auf @if/@for, inklusive Nachkontrolle.

4.   Standalone-Migration
schrittweise Ablösung der NgModules über die offiziellen Schematics.

5.   Signals-Einführung
neue Features signal-first, bestehende Services über Interop schrittweise überführt.

6.   Testing
Absicherung über bestehende und ergänzte Tests vor jedem Rollout-Schritt.

7.   Rollout
Inbetriebnahme in Etappen, ohne den laufenden Betrieb zu blockieren.

Den Detailgrad jedes Schritts stimmen wir auf jedes einzelne Projekt entsprechend ab.

Auf diese Weise konnten wir bereits den Großteil unserer Angular-Projekte in kurzen Zyklen auf die jeweils aktuelle stabile Version aktualisieren. Da wir dies regelmäßig durchführen, bleiben die Hürden bei jeder Migration überschaubar. Das ändert sich allerdings sehr schnell bei großen Versionssprüngen, bei denen mehrere Breaking Changes auf einmal das Leben schwer machen.

Architektur-Empfehlungen der SSA SoftSolutions GmbH aus der Projektpraxis

Drei Fragen tauchen bei fast jeder Modernisierung auf:

• RxJS oder Signals? In neuen Projekten setzen wir bevorzugt auf Signals.  Bestehende RxJS-Services überführen wir schrittweise über die Interop-Utilities.

• State-Management? Für komplexen, geteilten Zustand empfehlen wir Signal Store

• Zoneless? In neuen Projekten planen wir direkt ohne Zone.js. Bei bestehenden Anwendungen empfehlen wir zuerst Signals + OnPush. Dieses Vorgehen bringt bereits den größten Performance-Gewinn, bevor Zone.js in einem zweiten Schritt entfernt wird.

Der entscheidende Punkt: Evolution, keine Revolution

Angular 21 ist kein radikaler Bruch. Es ist das konsequente Ergebnis einer Entwicklung, die vor einigen Versionen begann und jetzt klare Konturen annimmt.

Signals-first, Standalone-default, kein Zone.js. Das sind die drei Leitprinzipien, an denen sich künftige Architekturentscheidungen orientieren sollten.

Die drei Leitprinzipien

Daran orientieren sich künftige Architekturentscheidungen.

Wer jetzt methodisch migriert, legt die Grundlage für wartbare, performante Angular-Applikationen der nächsten Jahre. Wer wartet, häuft technische Schulden auf, die später teurer werden.

Die gute Nachricht: Angular bietet für die meisten Migrationsschritte bereits Tooling-Unterstützung. Mit der richtigen Priorisierung ist die Umstellung planbar, ohne das laufende Projekt zu blockieren.

Warum Unternehmen Angular-Migrationen mit der SSA SoftSolutions GmbH umsetzen

Angular-Migrationen betreffen nicht nur den Quellcode. Sie beeinflussen Architektur, Wartbarkeit, Sicherheit, Betriebskosten und die zukünftige Erweiterbarkeit einer Anwendung. Deshalb verbinden wir technologische Modernisierung mit einem klaren Fokus auf die geschäftlichen Anforderungen unserer Kunden.

Die SSA SoftSolutions GmbH unterstützt Unternehmen bei:

• der Modernisierung individueller Softwarelösungen
• der Migration bestehender Angular-Anwendungen
• der Einführung moderner Softwarearchitekturen
• der Integration von KI-Funktionen in bestehende Systeme
• Support, Wartung und Weiterentwicklung geschäftskritischer Anwendungen

Durch die Kombination aus langjähriger Projekterfahrung, individueller Softwareentwicklung und technologischer Expertise schaffen wir Lösungen, die nicht nur technisch aktuell sind, sondern langfristig wirtschaftlichen Nutzen liefern.

Angular-Modernisierung mit der SSA SoftSolutions GmbH

Sie planen ein Upgrade von Angular 18, 19 oder 20 auf Angular 21? Wir begleiten Sie von der ersten Analyse bis zum Go-Live – strukturiert, planbar und ohne den laufenden Betrieb zu unterbrechen. Vereinbaren Sie jetzt ein kostenloses Erstgespräch: 

Ihr Ansprechpartner:

Martin Neumeier

Tel.: 0821 / 720 39 50

E-Mail: info@softsolutions.de

 

SSA SoftSolutions GmbH

Schwerpunkt: Angular, individuelle Softwareentwicklung, Softwaremodernisierung und KI-Integration