Cos'è Zone.js e cosa significa "zoneless" Angular?

Question

Accepted Answer

**Zone.js** è una libreria che Angular ha storicamente utilizzato per sapere **quando eseguire il rilevamento delle modifiche**. Esegue il patching delle API asincrone del browser affinché Angular possa rilevare automaticamente qualsiasi evento che potrebbe modificare lo stato. **Zoneless** Angular rimuove questa dipendenza, affidandosi invece a signals e notifiche esplicite.

## What Zone.js does

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

Questa è la "magia" dietro gli aggiornamenti automatici di Angular: modifichi una proprietà dopo una risposta HTTP o un clic, e la vista si aggiorna semplicemente — perché Zone.js ha detto ad Angular che un evento asincrono è completato.

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

## The downsides of 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
```

Poiché Zone.js non riesce a dire *cosa* è cambiato, innesca un passaggio completo di rilevamento delle modifiche su molti eventi — inefficiente per app di grandi dimensioni.

## Zoneless Angular (signals-based)

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

In modalità zoneless, Angular non si affida alle API asincrone patchate. Invece, il rilevamento delle modifiche viene attivato **esplicitamente** — principalmente da **signals** (che notificano ad Angular precisamente quando il loro valore cambia), più la pipe `async`, gli eventi e `markForCheck()`.

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

## Benefits of going 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)
```

## Perché è importante

Zone.js spiega il rilevamento delle modifiche "automatico" storico di Angular — e il suo costo (dimensioni del bundle, controllo ampio/impreciso).

Il passaggio a **zoneless**, alimentato da **signals**, è un grande cambiamento architetturale: rende gli aggiornamenti granulari ed espliciti, riduce il bundle e migliora le prestazioni.

Capire entrambi — perché Zone.js esisteva e cosa lo sostituisce — è sempre più importante mentre Angular si orienta verso un futuro zoneless e basato su signals come predefinito.