🚀 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 ist in der Developer Preview – weniger Magie, mehr Kontrolle.
• Control-Flow Syntax:@if, @for und @switch ersetzen die alten Sternchen-Direktiven.
• SSR hydratisiert jetzt inkrementell – schneller und ressourcenschonender.
• Diagnostics melden Fehler, bevor du sie suchst.
• TypeScript 5.8 und Node 20 sind Pflicht.

🧩 Neue Control-Flow-Blöcke

Das Angular-Team hat’s getan: Die gute alte *ngIf-Syntax ist offiziell veraltet. Ab jetzt gilt: @ statt * – klingt nach einem Twitter-Rebrand, ist aber tatsächlich ziemlich elegant.

@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, als wären sie von 2025 – nicht von 2013.

⚡ Signals – jetzt offiziell stabil!

Signals sind jetzt fester Bestandteil des Frameworks – kein Experiment mehr, sondern der neue Goldstandard für Reaktivität.

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

Und falls du RxJS nicht ganz loslassen willst:

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

Fühlt sich an wie RxJS, schmeckt aber mehr nach Angular.

🧘 Zoneless Change Detection

„Zone.js ist tot, lang lebe Zoneless!“ Naja … fast. In Angular 20 ist Zoneless noch Developer Preview, aber du kannst schon mal reinschnuppern.

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

Der Effekt: kein magisches Zone-Patching mehr – du entscheidest selbst, wann Angular neu rendert. Das spart Performance, Nerven und ein paar graue Haare.

🧠 Diagnostics – Angulars Lehrer mit Rotstift

Angular 20 bringt nicht nur neue Features, sondern auch neue Fehlermeldungen mit Stil. Das Framework warnt dich jetzt frühzeitig vor Dingen, die später garantiert schiefgehen würden.

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

Weniger „Warum funktioniert das nicht?!“ – mehr „Ah, das war dumm von mir.“ 😉

🧱 SSR & inkrementelle Hydration

Server-Side Rendering ist jetzt cleverer. Statt alles auf einmal zu hydratisieren, kann Angular Stück für Stück deine App aktivieren.

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

Das bedeutet: Schnellere erste Paints, weniger CPU-Last, glücklichere User.

🧰 Style-Guide: Weniger Suffixe, mehr Klarheit

Ab Angular 20 heißt es: „Ich bin kein Component, ich bin der Code.“ Die CLI generiert keine .component.ts-Suffixe mehr. Sauberer, kürzer – aber wer’s klassisch mag, kann’s in angular.json wieder aktivieren. (So wie Leute, die heute noch jQuery schreiben. 👀)

🧪 Test-Änderungen

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

Kurz: Einmal alle Tests laufen lassen – dann lachen. 😅

🚦 Update-Checkliste

1. Backup & Kaffee ☕️
2. Update in Etappen:

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

3. Migriere *ngIf & *ngFor:

   ng generate @angular/core:control-flow

4. typeCheckHostBindings aktivieren
5. SSR-Imports prüfen (provideServerRendering(withRoutes(...)))
6. Zoneless ausprobieren (provideZonelessChangeDetection())
7. Tests laufen lassen
8. Feierabendbier öffnen 🍺 (oder Club-Mate für die Puristen)

🏁 Fazit

Angular 20 ist kein Mini-Update – es ist ein echter Meilenstein.Signals, Zoneless, Hydration, Diagnostics – das Framework fühlt sich moderner, schlanker und reaktiver an als je zuvor.

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

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