⚡ Angular Zone-Free – Komplett ohne NgZone?

(Wie du Angular auch ohne Zone.js reaktiv und performant betreibst)

Seit Angular 16 gibt es eine echte Alternative zu Zone.js.
Aber lohnt sich das wirklich? Und wie geht man’s richtig an?

1️⃣ Warum überhaupt zonenfrei?

Zone.js patcht alles – von setTimeout bis Promise – und triggert Change Detection.

Aber:

• Das führt zu übermäßiger Change Detection
• Performance leidet bei großen Apps
• Debugging wird schwerer

Mit Signals und zonenfreier Strategie hast du:

✅ volle Kontrolle
✅ explizite Reaktivität
✅ weniger unnötige Re-Renders

2️⃣ Wie deaktiviert man Zone.js?

In deiner main.ts:

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

Oder komplett deaktivieren:

import 'zone.js'; // ❌ Entfernen!

Dann musst du alles selbst über signals, effect() oder NgRx / SignalStore steuern.

3️⃣ Wie machst du Change Detection ohne Zone?

Nutze ChangeDetectorRef, signals, effect() oder detectChanges() gezielt.

effect(() => {
  if (this.loading()) {
    this.ref.markForCheck();
  }
});

Oder per Injector gesteuert: inject(ChangeDetectorRef) + markForCheck().

4️⃣ Wann lohnt sich zonenfrei?

Zonenfreies Angular lohnt sich bei:

• 🧠 Hoher App-Komplexität
• ⚙️ Echtzeitdaten (WebSockets, Streams)
• 📊 Dashboard-Visualisierungen
• 🔬 Feinsteuerung der UI-Reaktivität

Aber Vorsicht: Du brauchst ein gutes Verständnis von Signals & State-Flow.

Fazit

Zone.js war lange alternativlos – jetzt hast du die Wahl.
Zonenfrei ist nicht für alle, aber für Profis mit Performance-Fokus Gold wert.

👉 Nächster Beitrag:
🧱 Angular Component Testing – Struktur, Patterns & Tools