Wat is Zone.js en wat betekent "zoneless" Angular?

Question

Accepted Answer

**Zone.js** is een bibliotheek die Angular historisch heeft gebruikt om te weten **wanneer change detection moet worden uitgevoerd**. Het patcht browser async API's zodat Angular automatisch elk event kan detecteren dat mogelijk de state verandert. **Zoneless** Angular verwijdert deze afhankelijkheid en vertrouwt in plaats daarvan op signals en expliciete meldingen.

## Wat Zone.js doet

```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.
```

Dit is de "magie" achter Angular's automatische updates: je verandert een property na een HTTP response of een klik, en de view wordt zomaar geupdate — omdat Zone.js Angular vertelde dat een async event is voltooid.

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

## De nadelen van 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
```

Omdat Zone.js niet kan bepalen *wat* is veranderd, triggert het een volledige change-detection pass op veel events — inefficiënt voor grote apps.

## Zoneless Angular (signals-based)

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

In zoneless modus vertrouwt Angular niet op gepatche async API's. In plaats daarvan wordt change detection **expliciet** geactiveerd — primair door **signals** (die Angular precies melden wanneer hun waarde verandert), plus de `async` pipe, events, en `markForCheck()`.

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

## Voordelen van 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)
```

## Waarom het belangrijk is

Zone.js verklaart Angular's langdurige "automatische" change detection — en de kosten ervan (bundle size, brede/imprecieve checking).

De overstap naar **zoneless**, aangestuurd door **signals**, is een grote architecturale verschuiving: het maakt updates fine-grained en expliciet, verkleint de bundle, en verbetert de performance.

Beiden begrijpen — waarom Zone.js bestond en wat het vervangt — wordt steeds belangrijker nu Angular stapsgewijs naar een signals-based, zoneless toekomst als standaard gaat.