Detección de cambios zoneless

La detección de cambios zoneless ejecuta Angular sin Zone.js; el framework actualiza la vista cuando los signals, los eventos del template o llamadas explícitas informan un cambio.

Durante la mayor parte de su historia Angular dependió de Zone.js, una librería que parchea APIs del navegador como setTimeout, las promesas y los event listeners. Cada vez que terminaba una operación asíncrona, Zone.js avisaba a Angular, y Angular revisaba el árbol de componentes en busca de cambios. Eso hacía automáticas las actualizaciones. También hacía correr muchas revisiones sin que nada hubiera cambiado.

En modo zoneless, Zone.js no se carga. Angular programa la detección de cambios solo cuando recibe una notificación específica:

• Cambia un signal leído en un template.
• Se dispara un event listener enlazado en un template.
• El pipe async recibe un valor.
• El código llama a markForCheck() o asigna un input de un componente.

Las versiones recientes de Angular activan este modo con provideZonelessChangeDetection() en la configuración de la aplicación.

Ejemplo

Un componente guarda un contador en un campo normal de la clase y lo incrementa dentro de setInterval. Con Zone.js la vista se actualiza cada segundo. Sin Zone.js la vista queda congelada, porque nada avisó a Angular. Guardar el contador en un signal lo resuelve:

count = signal(0);

constructor() {
  setInterval(() => this.count.update(n => n + 1), 1000);
}

Confusión frecuente

Zoneless se suele entender como "hay que reescribir todo con signals". Los componentes que ya usan OnPush con el pipe async o con markForCheck() en general funcionan sin cambios. El código que falla es el que mutaba campos normales desde timers, callbacks de terceros u otro trabajo asíncrono y dependía de que Zone.js lo notara.

Las librerías de terceros también requieren revisión, porque algunas todavía dependen de Zone.js. Un camino práctico es pasar primero los componentes a OnPush y quitar Zone.js después. En una plataforma de microfrontends, los remotos que corren dentro de la aplicación Angular del host heredan su modo, y su código debe ser compatible. En la referencia de AngularJS a Angular hay patrones relacionados.

Términos relacionados

• Detección de cambios
• Signals