Sin Zone.js — Native Async/Await: Angular 21 y la arquitectura Zoneless
Sin Zone.js — Native Async/Await es el cambio arquitectónico que Angular 21 trae para cerrar años de parches y trampas alrededor de la asincronía. En lugar de confiar en interceptores globales, el framework apuesta por Signals y async/await nativo, lo que redefine cómo se detectan cambios, cómo se escribe lógica asíncrona y cómo se depura una aplicación Angular a escala.
Resumen rápido (lectores con prisa)
Angular 21 elimina Zone.js y usa Signals como fuente de verdad. Usa async/await nativo sin envoltorios. Resultado: detección de cambios localizada, trazas de error más limpias y menos bundle inicial.
Cuándo: migraciones planificadas por fases. Cómo: mover estado a signals y usar OnPush; auditar subscribes y callbacks externos.
Tiempo estimado de lectura
Tiempo estimado de lectura: 5 min
Ideas clave
- Signals reemplazan a Zone.js: reactividad explícita y renderizado localizado.
- Async/await nativo: sin transpile ni parches que oculten trazas y comportamiento.
- Mejoras medibles: bundle inicial más pequeño, trazas limpias y menos comprobaciones globales.
- Migración requiere auditoría: refactor de suscripciones y adopción de OnPush y signals.
Sin Zone.js — Native Async/Await: qué cambia y por qué importa
Zone.js surgió como una solución pragmática: interceptar (monkey‑patch) APIs del navegador —setTimeout, fetch, Promises, addEventListener— para saber cuándo lanzar la detección de cambios. Funcionó, pero con costes claros: comprobaciones globales innecesarias, trazas de pila contaminadas y fricción con APIs modernas. Más aún, Zone.js no intercepta await a nivel de motor V8, lo que obligó a técnicas de transpile para mantener el comportamiento esperado.
Angular 21 elimina esa capa. En su lugar, Signals actúan como la fuente de verdad: cuando un signal cambia, Angular calcula qué partes de la vista dependen de él y actualiza solo esas piezas. El async/await se usa tal cual lo diseñó ECMAScript —sin envoltorios ni polyfills— y el navegador ejecuta la asincronía de manera óptima.
Documentación clave:
Cómo funciona el modelo Zoneless en práctica
La filosofía es simple: reactividad explícita y renderizado localizado. Un servicio realiza una llamada asíncrona con async/await, actualiza signals y la vista reacciona únicamente a esos cambios.
Ejemplo: servicio con signals
@Injectable({ providedIn: 'root' })
export class UserService {
readonly users = signal([]);
readonly loading = signal(false);
async loadUsers(): Promise {
this.loading.set(true);
try {
const response = await fetch('/api/users');
this.users.set(await response.json());
} finally {
this.loading.set(false);
}
}
} Ejemplo: template con signals
En el template, consumir signals es directo y elimina muchos patrones previos (pipes async, subscribes que mutan propiedades de clase):
<if (loading()) {>
<app-skeleton />
<} @else {>
@for (user of users()) {
<app-user-card [user]="user" />
}
}Angular gestiona internamente las dependencias entre signals y templates; no necesitas Zone.js para “avivar” la vista.
Beneficios técnicos medibles
- Reducción del bundle: eliminar Zone.js suele suponer ~100 KB minificados menos en el bundle inicial, con impacto directo en LCP.
- Trazas de error limpias: las stack traces muestran tu código, no los callbacks internos de Zone.js, lo que reduce tiempo de diagnóstico.
- Rendimiento en runtime: eventos de alta frecuencia (
scroll,mousemove) dejan de disparar comprobaciones globales; solo los cambios efectivos actualizan la UI. - Compatibilidad natural con APIs modernas: fetch, Web Streams, WebSockets y librerías modernas funcionan sin trampas de detección.
Riesgos y puntos a auditar antes de migrar
Eliminar Zone.js no es solo quitar un import. Patrones comunes que romperán incluyen:
- Mutar propiedades de clase dentro de
subscribe()esperando que la vista se refresque automáticamente. - Dependencia implícita en
NgZone.run()para actualizaciones desde callbacks externos. - Componentes sin
ChangeDetectionStrategy.OnPushque confían en comprobaciones globales.
Identifica y refactoriza estos puntos antes de desactivar Zone.js.
Estrategia práctica de migración
Pasos prácticos recomendados para una migración segura y por fases.
Checklist rápida
- Establece
ChangeDetectionStrategy.OnPushen toda la base de componentes. - Migrar estado de componentes a
signal()ycomputed(). Empieza por componentes hoja. - Reemplaza suscripciones RxJS que mutan estado por
toSignal()(@angular/core/rxjs-interop) o por flujos que actualicen signals explícitamente. - Ejecuta pruebas E2E y de accesibilidad; valida rendimiento en escenarios reales.
- Activa el modo zoneless (p. ej.
provideExperimentalZonelessChangeDetection()o su equivalente estable) cuando el 100% del estado dependiente de la vista esté en signals.
Checklist rápida para auditoría antes de activar zoneless:
- Todos los componentes críticos usan OnPush.
- No existen mutaciones de estado implícitas en subscribes.
- CI ejecuta pruebas de integración que cubren flujos asíncronos.
- Observabilidad en producción: trazas y métricas para comparar comportamiento pre/post migración.
Conclusión: menos magia, más control
Sin Zone.js — Native Async/Await no es una moda; es la materialización de un principio: reactividad explícita y alineada con las plataformas. Para equipos que priorizan rendimiento, claridad y una depuración más rápida, Angular 21 ofrece un modelo más predecible y eficiente.
Empieza la migración por componentes críticos, automatiza las pruebas de integración y planifica la adopción en fases: la reducción de complejidad será visible y medible. En la próxima entrega publicaremos una checklist automatizable y scripts de migración para acelerar este proceso en proyectos reales.
FAQ
¿Qué es exactamente lo que reemplaza a Zone.js en Angular 21?
async/await nativo. Signals actúan como la fuente de verdad para dependencias y actualizaciones de vista.¿Por qué las trazas de error mejoran sin Zone.js?
¿Qué patrones rompen al desactivar Zone.js?
subscribe(), dependencia en NgZone.run() y componentes que esperan comprobaciones globales en lugar de OnPush y signals.¿Cuánto se reduce el bundle al quitar Zone.js?
¿Cuál es el primer paso práctico para migrar?
ChangeDetectionStrategy.OnPush en los componentes y mover estado a signal() y computed(), empezando por componentes hoja.¿Debo activar el modo zoneless inmediatamente en producción?
