Hva er Zone.js og hva betyr "zoneless" Angular?

Question

Accepted Answer

**Zone.js** er et bibliotek som Angular historisk har brukt for å vite **når endringdeteksjon skal kjøres**. Det patcher nettleserasinkrone APIer slik at Angular automatisk kan oppdage hendelser som kan endre tilstand. **Zoneless** Angular fjerner denne avhengigheten og er avhengig av signaler og eksplisitte varsler i stedet.

## Hva Zone.js gjø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" bak Angulars automatiske oppdateringer: du endrer en egenskap etter en HTTP-respons eller et klikk, og visningen oppdateres bare — fordi Zone.js fortalte Angular at en asynkron hendelse var fullført.

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

## Ulempene 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
```

Fordi Zone.js ikke kan si *hva* som endret seg, utløser det en fullstendig endringdeteksjon på mange hendelser — ineffektivt for store apper.

## Zoneless Angular (signalbasert)

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

I zoneless-modus er ikke Angular avhengig av patchede asinkrone APIer. I stedet utløses endringdeteksjon **eksplisitt** — primært av **signaler** (som varsler Angular presist når verdien deres endres), pluss `async`-pipen, hendelser og `markForCheck()`.

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

## Fordeler med å 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 betyr noe

Zone.js forklarer Angulars langvarige "automatiske" endringdeteksjon — og kostnaden (pakkestørrelse, bred/upresist sjekking).

Overgangen til **zoneless**, drevet av **signaler**, er et stort arkitekturskifte: det gjør oppdateringer finkornet og eksplisitt, reduserer pakken og forbedrer ytelsen.

Å forstå begge — hvorfor Zone.js eksisterte og hva som erstatter det — blir stadig viktigere ettersom Angular styrer mot en signalbasert, zoneless fremtid som standard.