¿Qué es Zone.js y qué significa Angular "zoneless"?

Question

Accepted Answer

**Zone.js** es una librería que Angular ha utilizado históricamente para saber **cuándo ejecutar la detección de cambios**. Aplica parches a las APIs asincrónicas del navegador para que Angular pueda detectar automáticamente cualquier evento que podría cambiar el estado. **Zoneless** Angular elimina esta dependencia, confiando en signals y notificaciones explícitas.

## Qué hace Zone.js

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

Este es el "truco" detrás de las actualizaciones automáticas de Angular: cambias una propiedad después de una respuesta HTTP o un clic, y la vista simplemente se actualiza — porque Zone.js le dijo a Angular que un evento asincrónico se completó.

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

## Las desventajas 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
```

Porque Zone.js no puede saber *qué* cambió, activa un paso completo de detección de cambios en muchos eventos — ineficiente para aplicaciones grandes.

## Angular Zoneless (basado en signals)

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

En modo zoneless, Angular no confía en APIs asincrónicas parcheadas. En cambio, la detección de cambios se activa **explícitamente** — principalmente mediante **signals** (que notifican a Angular precisamente cuando cambia su valor), más el pipe `async`, eventos y `markForCheck()`.

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

## Beneficios de pasar a 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)
```

## Por qué es importante

Zone.js explica la detección de cambios "automática" de larga data de Angular — y su costo (tamaño del bundle, verificación amplia/imprecisa).

El movimiento hacia **zoneless**, impulsado por **signals**, es un cambio arquitectónico importante: hace que las actualizaciones sean granulares y explícitas, reduce el tamaño del bundle y mejora el rendimiento.

Entender ambos — por qué existía Zone.js y qué lo reemplaza — es cada vez más importante a medida que Angular se dirige hacia un futuro signals-based, zoneless como predeterminado.