Angular signals dio el pistoletazo de salida a una nueva era del desarrollo web con Angular.
Al introducir una nueva forma de control de detección de cambios con Angular signals el equipo de desarrolladores de Angular nos está desplazando lentamente hacia un futuro de Angular sin la dependencia de zone.js.
Así que hoy vamos a hablar de cómo deshabilitar la dependencia de zone.js en el framework Angular.
Y depender únicamente de las señales de Angular o de la detección manual de cambios para gestionar la detección de cambios de nuestra aplicación web Angular.
¿Debería hacer zoneless con Angular?
Recuerda que las aplicaciones Angular zoneless aún están en fase beta. No es para aplicaciones empresariales a gran escala todavía.
Una de las mayores desventajas de ir zoneless es que una gran cantidad de bibliotecas de la comunidad no funcionan con zoneless, es por eso que todavía está marcado como experimental.
Dependiendo de la cantidad de librerías externas que uses, podría ser factible o no usarlo en esta etapa.
Primero tenemos que actualizar a Angular 18
Ahora, antes de sumergirnos en la migración de nuestra aplicación Angular a zoneless primero tendremos que actualizarla a Angular vs 18.
Puedes hacerlo con este simple comando.
Y ahora nuestra aplicación se ha actualizado a Angular 18.
Pero sólo porque migramos a Angular 18 que no significa automáticamente que usted está utilizando zoneless.
¡Así que vamos a sumergirnos!
¿Cómo migrar Angular a una aplicación zoneless?
Hay 3 pasos básicos para migrar.
El primer paso es habilitar la detección de cambios zoneless en tu archivo app.config.ts.
Haremos esto usando la función provideExperimentalZonelessChangeDetection de @angular/core de esta manera.
import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection(),
provideRouter(routes),
provideAnimationsAsync(),
provideClientHydration()
]
};Notarás que se llama experimental.
Eso es porque la característica de detección de cambios zoneless está actualmente marcada como experimental en Angular 18.
En cualquier caso, creo que para la mayoría de las aplicaciones Angular la versión inicial de zoneless será más que suficiente.
El segundo paso es eliminar el polyfill zone.js de nuestro archivo de configuración angular.json.
Así que abriremos angular.json y cambiaremos esto...
"polyfills": [ "zone.js" ],a esto.
"polyfills": [ ],Y el tercer y último paso es reiniciar nuestra app Angular ejecutando npm start.
Y... ¡TADA! 🎉🎉🎉🎉.
Dejamos oficialmente Zone.js y entramos en el nuevo futuro de Angular.
Tu app Angular ya no depende de la dependencia de zone.js.
Y eso, amigo mío, es cómo usar Angular sin zone.js.
Hasta la próxima,