Vad är Zone.js och vad betyder "zonless" Angular?

Question

Accepted Answer

**Zone.js** är ett bibliotek som Angular historiskt sett har använt för att **veta när ändringsdetektering ska köras**. Det korrigerar webbläsarens asynkrona API:er så att Angular automatiskt kan detektera alla händelser som kan ändra tillståndet. **Zonless** Angular tar bort detta beroende och förlitar sig istället på signaler och explicita meddelanden.

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

Detta är "magin" bakom Angulars automatiska uppdateringar: du ändrar en egenskap efter ett HTTP-svar eller ett klick, och vyn uppdateras bara — eftersom Zone.js berättade för Angular att en asynkron händelse slutfördes.

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

## Nackdelarna med 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
```

Eftersom Zone.js inte kan säga *vad* som ändrades utlöser det en fullständig ändringsdetekteringspass på många händelser — ineffektivt för stora appar.

## Zonless Angular (signalbaserad)

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

I zonless-läge förlitar sig Angular inte på korrigerade asynkrona API:er. Istället utlöses ändringsdetektering **explicit** — främst av **signaler** (som meddelar Angular exakt när deras värde ändras), plus `async`-röret, händelser och `markForCheck()`.

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

## Fördelar med att gå zonless

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

## Varför det är viktigt

Zone.js förklarar Angulars långvariga "automatiska" ändringsdetektering — och dess kostnad (paketstorlek, bred/oprecis kontroll).

Flytningen till **zonless**, driven av **signaler**, är en stor arkitekturförändring: den gör uppdateringar findelade och explicita, minskar paketet och förbättrar prestanda.

Att förstå båda — varför Zone.js fanns och vad som ersätter det — blir alltmer viktigt när Angular styr mot en signalbaserad, zonless-framtid som standard.