Qu'est-ce que Zone.js et que signifie « zoneless » Angular ?

Question

Accepted Answer

**Zone.js** est une bibliothèque qu'Angular a historiquement utilisée pour savoir **quand exécuter la détection des changements**. Elle patche les API asynchrones du navigateur pour qu'Angular puisse détecter automatiquement tout événement susceptible de modifier l'état. **Zoneless** Angular supprime cette dépendance, s'appuyant sur les signaux et les notifications explicites à la place.

## Qu'est-ce que Zone.js fait

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

C'est la « magie » derrière les mises à jour automatiques d'Angular : vous modifiez une propriété après une réponse HTTP ou un clic, et la vue se met simplement à jour — parce que Zone.js a dit à Angular qu'un événement asynchrone s'était terminé.

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

## Les inconvénients de 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
```

Parce que Zone.js ne peut pas dire *ce qui* a changé, cela déclenche un passage complet de détection des changements sur de nombreux événements — inefficace pour les grandes applications.

## Angular zoneless (basé sur les signaux)

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

En mode zoneless, Angular ne s'appuie pas sur les API asynchrones patchées. À la place, la détection des changements est déclenchée **explicitement** — principalement par les **signaux** (qui notifient Angular précisément quand leur valeur change), plus le pipe `async`, les événements, et `markForCheck()`.

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

## Avantages de passer à 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)
```

## Pourquoi c'est important

Zone.js explique la détection des changements « automatique » de longue date d'Angular — et son coût (taille du bundle, vérification large/imprécise).

Le passage au **zoneless**, alimenté par les **signaux**, est un changement architectural majeur : cela rend les mises à jour précises et explicites, réduit le bundle, et améliore les performances.

Comprendre les deux — pourquoi Zone.js existait et ce qui le remplace — devient de plus en plus important alors qu'Angular s'oriente vers un avenir zoneless basé sur les signaux comme comportement par défaut.