Mikä on Zone.js ja mitä tarkoittaa "zoneless" Angular?

Question

Accepted Answer

**Zone.js** on kirjasto, jota Angular on historiallisesti käyttänyt **tietämään milloin muutoksentunnistus pitää suorittaa**. Se korjaa selaimen async-sovellusliittymiä niin, että Angular voi automaattisesti havaita kaikki tapahtumat, jotka saattavat muuttaa tilaa. **Zoneless** Angular poistaa tämän riippuvuuden ja luottaa sen sijaan signaleihin ja eksplisiittisiin ilmoituksiin.

## Mitä Zone.js tekee

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

Tämä on "taikaa" Angularin automaattisten päivitysten takana: muutat ominaisuutta HTTP-vastauksen tai klikkauksen jälkeen, ja näkymä yksinkertaisesti päivittyy — koska Zone.js kertoi Angularille, että async-tapahtuma valmistui.

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

## Zone.js:n haitat

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

Koska Zone.js ei voi kertoa *mitä* muuttui, se käynnistää täyden muutoksentunnistuksen läpikäynnin monissa tapahtumissa — tehotonta suurille sovelluksille.

## Zoneless Angular (signals-perustainen)

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

Zoneless-tilassa Angular ei luota korjattuihin async-sovellusliittymiin. Sen sijaan muutoksentunnistus käynnistyy **eksplisiittisesti** — ensisijaisesti **signalien** kautta (jotka ilmoittavat Angularille tarkalleen kun niiden arvo muuttuu), lisäksi `async`-putki, tapahtumat ja `markForCheck()`.

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

## Zoneless-siirtymisen hyödyt

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

## Miksi tämä on tärkeää

Zone.js selittää Angularin pitkäaikaisen "automaattisen" muutoksentunnistuksen — ja sen kustannukset (nipun koko, laaja/epätarkka tarkistus).

Siirtyminen **zonelessiä** kohti, jota **signaalit** ohjaavat, on merkittävä arkkitehtuurimuutos: se tekee päivityksistä hienosäätöisiä ja eksplisiittisiä, pienentää nipun kokoa ja parantaa suorituskykyä.

Molempien ymmärtäminen — miksi Zone.js oli olemassa ja mikä sen korvaa — on yhä tärkeämpää, kun Angular ohjaa kohti signaalipohjaista, zoneless-tulevaisuutta oletuksena.