Hvad er Zone.js og hvad betyder "zoneless" Angular?

Question

Accepted Answer

**Zone.js** er et bibliotek, som Angular historisk har brugt til at vide **hvornår der skal køres ændringsdetektion**. Det patcher browser-async-API'er, så Angular automatisk kan detektere enhver begivenhed, der kunne ændre tilstand. **Zoneless** Angular fjerner denne afhængighed og er i stedet afhængig af signals og eksplicitte notifikationer.

## Hvad Zone.js gør

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

Dette er "magien" bag Angular's automatiske opdateringer: du ændrer en egenskab efter et HTTP-svar eller et klik, og visningen opdateres blot — fordi Zone.js fortalte Angular, at en async-begivenhed blev fuldført.

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

## Ulemperne ved 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
```

Fordi Zone.js ikke kan fortælle *hvad* der ændrede sig, udløser det en komplet ændringsdetektion-passage på mange begivenheder — ineffektivt for store apps.

## Zoneless Angular (signals-based)

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

I zoneless-tilstand stoler Angular ikke på patchede async-API'er. I stedet udløses ændringsdetektion **eksplicit** — primært via **signals** (som underretter Angular præcist, når deres værdi ændres), plus `async` pipe, events og `markForCheck()`.

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

## Fordele ved at gå 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)
```

## Hvorfor det betyder noget

Zone.js forklarer Angular's langvarige "automatiske" ændringsdetektion — og dens omkostning (bundle-størrelse, bredt/upræcist kontrol).

Flytningen til **zoneless**, drevet af **signals**, er en større arkitektonisk ændring: det gør opdateringer fine-grained og eksplicitte, reducerer bundle-størrelse og forbedrer ydeevne.

At forstå begge dele — hvorfor Zone.js eksisterede og hvad der erstatter det — bliver stadig vigtigere, da Angular styrer mod en signals-baseret, zoneless fremtid som standard.