Was ist Zone.js und was bedeutet "zoneless" Angular?

Question

Accepted Answer

**Zone.js** ist eine Bibliothek, die Angular historisch verwendet hat, um zu wissen, **wann Change Detection ausgeführt werden soll**. Sie patcht Browser-Async-APIs, damit Angular automatisch alle Ereignisse erkennen kann, die einen Zustand ändern könnten. **Zoneless** Angular entfernt diese Abhängigkeit und stützt sich stattdessen auf Signals und explizite Benachrichtigungen.

## Was Zone.js tut

```text
Zone.js monkey-patches async APIs: setTimeout, addEventListener, Promise,
XHR/fetch, etc. When any of them fires, Zone.js notifies Angular →
Angular runs change detection automatically.
```

Dies ist die "Magie" hinter Angulars automatischen Updates: Sie ändern eine Eigenschaft nach einer HTTP-Antwort oder einem Klick, und die Ansicht wird einfach aktualisiert — weil Zone.js Angular mitgeteilt hat, dass ein asynchrones Ereignis abgeschlossen wurde.

```ts
// you write this, and the view updates automatically — thanks to Zone.js:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js triggers CD
```

## Die Nachteile von Zone.js

```text
✗ Overhead — patches everything, and triggers CD broadly (checks the whole tree)
✗ ~100KB added to the bundle
✗ Imprecise — runs change detection even when nothing relevant changed
✗ Can be confusing with third-party code that runs outside Angular's zone
```

Da Zone.js nicht sagen kann, *was* sich geändert hat, löst es bei vielen Ereignissen einen vollständigen Change-Detection-Durchgang aus — ineffizient für große Apps.

## Zoneless Angular (signalbasiert)

```ts
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()], // no Zone.js
});
```

Im zoneless-Modus verlässt sich Angular nicht auf gepatchte Async-APIs. Stattdessen wird Change Detection **explizit** ausgelöst — hauptsächlich durch **Signals** (die Angular genau benachrichtigen, wenn sich ihr Wert ändert), plus `async` Pipe, Events und `markForCheck()`.

```ts
count = signal(0);
increment() { this.count.set(this.count() + 1); } // the signal tells Angular what changed → fine-grained update
```

## Vorteile von Zoneless

```text
✓ Smaller bundle (drop ~100KB Zone.js)
✓ Better performance — fine-grained, precise updates (only what depends on changed signals)
✓ Cleaner integration with non-Angular code
✓ Simpler debugging (no zone-related stack noise)
```

## Warum es wichtig ist

Zone.js erklärt Angulars langjährige "automatische" Change Detection — und ihre Kosten (Bundle-Größe, breite/ungenaue Prüfung).

Die Umstellung auf **zoneless**, angetrieben durch **Signals**, ist ein großer architektonischer Wandel: Sie macht Updates präzise und explizit, verkleinert das Bundle und verbessert die Leistung.

Both zu verstehen — warum Zone.js existierte und was es ersetzt — wird zunehmend wichtig, da Angular in eine signalbasierte, zoneless Zukunft als Standard steuert.