Što je Zone.js i što "zoneless" Angular znači?

Question

Accepted Answer

**Zone.js** je biblioteka koju je Angular povijesno koristio da bi znao **kada pokrenuti detektovanje promjena**. Patcha asinkroni API preglednika kako bi Angular mogao automatski detektovati bilo koji događaj koji bi mogao promijeniti stanje. **Zoneless** Angular uklanja tu zavisnost, oslanjajući se na signale i eksplicitne notifikacije umjesto toga.

## Što Zone.js radi

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

Ovo je "čarolija" iza Angular-ovih automatskih ažuriranja: mijenjate svojstvo nakon HTTP odgovora ili klika, i prikaz se jednostavno ažurira — jer je Zone.js rekao Angular-u da je asinkroni događaj završen.

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

## Nedostaci Zone.js-a

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

Zato što Zone.js ne može reći *što* se promijenilo, aktivira cijeli prolaz detektovanja promjena na mnogim događajima — neučinkovito za velike aplikacije.

## Zoneless Angular (na temelju signala)

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

U zoneless modu, Angular se ne oslanja na patchirane asinkroni API-je. Umjesto toga, detektovanje promjena se aktivira **eksplicitno** — prvenstveno pomoću **signala** (koji obavijeste Angular-u točno kada se njihova vrijednost promijeni), plus `async` pipe, događaji, i `markForCheck()`.

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

## Prednosti prelaska na 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)
```

## Zašto je to važno

Zone.js objašnjava Angular-ovu dugogodišnju "automatsku" detektovanje promjena — i njegovu cijenu (veličina paketa, široko/neprecizno provjere).

Preход na **zoneless**, pokrenut **signalima**, je velika promjena arhitekture: čini ažuriranja precizna i eksplicitna, smanjuje veličinu paketa, i poboljšava performanse.

Razumijevanje obojega — zašto je Zone.js postojao i što ga zamjenjuje — postaje sve važnije dok se Angular usmjerava prema budućnosti na temelju signala, zoneless kao standardu.