🧘‍♂️ Angular Zone-Free – Vollständig zonenlos entwickeln?

(Warum Zone.js Vergangenheit ist – und wie du Angular zonenfrei meisterst)

Zone.js war lange notwendig, um Change Detection zu triggern –
doch mit Angular Signals, NgZone: 'noop' und runOutsideAngular() ist das nicht mehr zwingend nötig.

1️⃣ Was bedeutet „zone-free“?

Zone-Free = Angular rendert ohne automatische Change Detection durch Zone.js

Vorteile:

• 🚀 Mehr Performance
• 🧠 Weniger unerwartete Trigger
• 🔍 Besseres Debugging & Predictability

2️⃣ Setup für Zone-Free

bootstrapApplication(AppComponent, {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true, runOutsideAngular: true })
  ]
});

Oder in main.ts direkt:

import 'zone.js'; // ❌ weglassen

3️⃣ Change Detection manuell kontrollieren

import { inject, ChangeDetectorRef } from '@angular/core';

@Component({ ... })
export class ExampleComponent {
  private cdRef = inject(ChangeDetectorRef);

  update() {
    // manuelles Triggern
    this.cdRef.detectChanges();
  }
}

4️⃣ Signals + Zone-Free = ❤️

Mit Signals brauchst du fast keine Change Detection mehr, z. B.:

const counter = signal(0);

→ @Component updated automatisch bei Signal-Änderung.

5️⃣ Wann lohnt es sich?

✅ Apps mit hoher Performance-Anforderung
✅ Komplexe Apps mit vielen unnötigen CD-Zyklen
❌ Kleine Seiten mit Forms & klassischem Template-Binding? Eher nicht nötig.

Fazit

Zone-Free + Signals = Angular der Zukunft
Du hast die Kontrolle – und die Performance, die du verdienst.

👉 Nächster Beitrag:
📦 Angular Feature Flags – Dynamik & Sicherheit für Enterprise-Projekte