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

Question

IT Interview Practice · 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.

Was Zone.js tut

Die Nachteile von Zone.js

Zoneless Angular (signalbasiert)

Vorteile von Zoneless

Warum es wichtig ist

Ähnliche Fragen