Angular 20 ist da!

Und nein, du hast keine 19 Versionen verpasst. Aber diesmal hat das Team ordentlich Gas gegeben. Was früher eine Feature-Preview war, ist jetzt stabil – und manches, was wir liebgewonnen haben, ist … sagen wir: deprecated mit Ansage. 😅

Also schnapp dir einen Kaffee (oder drei) – hier kommt das Wichtigste aus Angular 20.

💡 TL;DR — Die Kurzfassung

• Signals sind offiziell stabil: effect(), toSignal(), toObservable()

• Zoneless Change Detection in Developer Preview

• Control-Flow Syntax: @if, @for, @switch ersetzen die Sternchen-Direktiven

• SSR hydratisiert jetzt inkrementell

• Diagnostics melden Fehler früher

• TypeScript 5.8 und Node 20 sind Pflicht

🧩 Neue Control-Flow-Blöcke

Die gute alte *ngIf-Syntax ist offiziell veraltet. Ab jetzt gilt: @ statt *.

_{@if (user) { <div>{{ user.name }}</div> } @else { <div>Kein User</div> }}

_{@for (item of items; track item.id) { <li>{{ item.name }}</li> } @empty { <li>Keine Items gefunden</li> }}

Endlich Templates, die aussehen wie 2025 – nicht wie 2013.

⚡ Signals – jetzt offiziell stabil!

Signals sind jetzt fester Bestandteil des Frameworks – kein Experiment mehr, sondern Standard.

import { signal, effect } from '@angular/core'; const count = signal(0); effect(() => console.log('Count:', count())); count.set(count() + 1);

Und wenn du RxJS weiterhin nutzen willst:

import { timer } from 'rxjs'; import { toSignal } from '@angular/core'; const time = toSignal(timer(0, 1000));

🧘 Zoneless Change Detection

„Zone.js ist tot, lang lebe Zoneless!“ Naja … fast. Es ist Developer Preview – aber nutzbar.

import { bootstrapApplication, provideZonelessChangeDetection } from '@angular/core'; import { AppComponent } from './app.component'; bootstrapApplication(AppComponent, { providers: [provideZonelessChangeDetection()] });

Kein Zone-Patching mehr – du entscheidest selbst, wann Angular rendert.

🧠 Diagnostics – Angulars Lehrer mit Rotstift

Angular warnt dich jetzt früher vor Problemen.

{ "angularCompilerOptions": { "typeCheckHostBindings": true, "extendedDiagnostics": { "checks": { "missingStructuralDirective": "warning", "uninvokedTrackFunction": "warning" } } } }

Weniger „Warum funktioniert das nicht?!“ – mehr „Ah, logisch.“

🧱 SSR & inkrementelle Hydration

Angular aktiviert gerenderte Inhalte nun schrittweise – effizienter & schneller.

import { provideServerRendering, withRoutes } from '@angular/ssr'; bootstrapApplication(AppComponent, { providers: [provideServerRendering(withRoutes(serverRoutes))] });

🧰 Style-Guide: Weniger Suffixe, mehr Klarheit

Die CLI generiert keine .component.ts-Dateinamen mehr. Kürzer, sauberer – und per angular.json umstellbar.

🧪 Test-Änderungen

TestBed.get() → TestBed.inject() flushEffects() → tick() autoDetectChanges funktioniert nicht mehr mit Zoneless

Kurz gesagt: Einmal Tests laufen lassen → dann lachen. 😅

🚦 Update-Checkliste

1. Backup & Kaffee ☕

2. Updates in Etappen:

ng update @angular/core@18 ng update @angular/core@19 ng update @angular/core@20

1. Migriere *ngIf & *ngFor:

ng generate @angular/core:control-flow

1. typeCheckHostBindings aktivieren

2. SSR-Imports prüfen

3. Zoneless ausprobieren

4. Tests laufen lassen

5. Feierabendbier 🍺 (oder Club-Mate)

🏁 Fazit

Angular 20 ist ein echter Meilenstein. Signals, Zoneless, neue Hydration, Diagnostics – Angular wirkt moderner und reaktiver als je zuvor.

Wenn Angular 14 die Pubertät war, ist Angular 20 jetzt erwachsen. 🎓

Geschrieben von jemandem, der ngIf schon vermisst – aber @if trotzdem liebt.