Angular sin zonas
Ejecutar Angular sin Zone.js
Angular sin zonas es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Más allá de Zone.js
Zone.js tiene cierta sobrecarga y modifica las API globales. Angular moderno ofrece un modo sin zonas, en el que la detección de cambios se basa en signals y notificaciones explícitas en lugar de modificar las zonas.
Habilitar el modo sin zonas
Proporcione el proveedor de detección de cambios sin zonas en la configuración de arranque.
bootstrapApplication(AppComponent, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});Eliminar Zone.js
En el modo sin zonas, también se elimina el polyfill zone.js de la configuración de compilación, lo que reduce el tamaño del bundle y el coste de inicio.
// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'¿Qué activa ahora la detección?
Sin zonas, Angular programa la detección de cambios cuando: cambia un signal leído en una plantilla, emite un pipe async, se dispara un enlace de evento o se llama a markForCheck().
Los signals son fundamentales
Las aplicaciones sin zonas dependen en gran medida de los signals para gestionar el estado. Leer un signal en una plantilla crea una dependencia; actualizarlo notifica a Angular para que actualice esa vista.
count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CDLos eventos siguen notificando
Los enlaces de eventos de la plantilla notifican directamente a Angular, por lo que las interacciones del usuario siguen actualizando la interfaz sin zonas.
<button (click)="count.update(c => c + 1)">+</button>Async sin zonas
Un setTimeout directo o una operación asíncrona que no use signals ya no activa automáticamente la detección. Encapsule ese estado en signals o llame a markForCheck().
setTimeout(() => this.ready.set(true), 1000);Compatibilidad del pipe async
El pipe async sigue funcionando en el modo sin zonas porque marca explícitamente la vista para comprobarla en cada emisión.
<p>{{ data$ | async }}</p>Bibliotecas de terceros
Algunas bibliotecas daban por hecho que Zone.js activaba la detección automáticamente. En el modo sin zonas, puede que tenga que encapsular sus callbacks para actualizar un signal o llamar manualmente a markForCheck().
Ventajas
El modo sin zonas implica bundles más pequeños, un inicio más rápido, menos ciclos adicionales inesperados y un modelo mental más claro: la interfaz solo se actualiza cuando cambia realmente el estado que está siguiendo.
Estado experimental
El proveedor se llama provideExperimentalZonelessChangeDetection porque la API aún se está estabilizando. Adóptelo en aplicaciones nuevas centradas en signals y realice pruebas exhaustivas.
Comprobación rápida
Compruebe cuánto entiende Angular sin zonas.
Resumen
Ha aprendido que provideExperimentalZonelessChangeDetection() elimina la necesidad de Zone.js y gestiona las actualizaciones mediante signals, eventos, el pipe async y markForCheck(), para crear aplicaciones más pequeñas, rápidas y predecibles.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 38
- Lecciones
- 144
Preguntas frecuentes
¿La lección «Angular sin zonas» es gratis?
Sí — el texto completo de «Angular sin zonas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Angular sin zonas»?
Ejecutar Angular sin Zone.js Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Angular sin zonas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cómo funciona la detección de cambios
- Detección de cambios con OnPush
- Angular sin zonas
- Optimización de listas y renderizado