Angular 19 y ZoneLess

No importa si estás usando Angular 14, 15 o incluso 19: tus aplicaciones siguen bajo el paraguas de Zone.js. Quizás sientas que tus aplicaciones de Angular funcionan bien, pero por debajo, con Zone.js, Angular necesita recorrer todo el árbol del DOM y eso termina afectando el rendimiento. Esto ocurre porque Zone.js intercepta las APIs del navegador para escuchar eventos del DOM y avisarle a Angular cada vez que se dispara un evento. Como Zone.js no conoce el estado interno de tu aplicación ni qué causó exactamente el cambio, Angular se ve obligado a revisar cada nodo de la app.

Al pasar a un enfoque zoneless, podemos apoyarnos en ChangeDetectorRef.markForCheck (el cual usa AsyncPipe), ComponentRef.setInput, o directamente en Signals para reaccionar a los cambios, además de nuevos hooks del ciclo de vida como afterNextRender o afterRender.

Migrar a ZoneLess

Primero, creamos un nuevo proyecto usando el CLI de Angular 19 con ng new my-zoneless-app:

ng new my-zoneless-app
✔ Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss        
        ]
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? no
CREATE my-zoneless-app/README.md (1476 bytes)
CREATE my-zoneless-app/.editorconfig (314 bytes)
CREATE my-zoneless-app/.gitignore (587 bytes)
CREATE my-zoneless-app/angular.json (2800 bytes)
CREATE my-zoneless-app/package.json (1046 bytes)
CREATE my-zoneless-app/tsconfig.json (915 bytes)

Eliminamos Zone.js de nuestro proyecto ejecutando el comando npm uninstall zone.js:

npm uninstall zone.js

Edita tu archivo angular.json para remover zone.js y zone.js/testing del arreglo de polyfills para que no se incluyan en el build. Si tu proyecto utiliza un archivo polyfills.ts explícito, remueve también las líneas import 'zone.js'; e import 'zone.js/testing'; de ese archivo.

Para activar Angular sin Zone.js, abre el archivo app.config.ts. En la sección de providers, elimina provideZoneChangeDetection({ eventCoalescing: true }) y agrega provideExperimentalZonelessChangeDetection():

Note: provideExperimentalZonelessChangeDetection es experimental.

Nuestro archivo app.config.ts queda de la siguiente manera:

import {ApplicationConfig, provideExperimentalZonelessChangeDetection, provideZoneChangeDetection} from '@angular/core';
import { provideRouter } from '@angular/router';
 
import { routes } from './app.routes';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes)]
};

Guarda los cambios y ejecuta ng serve. ¡Y listo! Nuestra aplicación funciona exactamente igual que antes, pero ahora sin NgZone. 🎉

Esto funciona perfecto para migrar proyectos, pero quizás quieras crear un proyecto zoneless desde cero. No te preocupes: el CLI de Angular nos permite hacerlo directamente con una bandera.

¿UN SEGUNDO?
¿Quieres aprender Angular Moderno en español con Signals, Functional Interceptors, Defer Blocks, Control Flow, SSR además de Jest, NgRx Signals y más? ¡Este es tu curso!

¿Crear una aplicación zoneless por defecto?

Para crear una aplicación zoneless directamente usando el CLI de Angular, generamos el proyecto con el flag --experimental-zoneless:

ng new fastweb --experimental-zoneless

El flag --experimental-zoneless configura el proyecto listo para usar desde el primer momento, preparándolo para trabajar sin Angular Zones.

Un detalle a tener en cuenta: en Angular 19.0.1 todavía necesitamos remover el paquete zone.js manualmente ejecutando npm uninstall zone.js:

Una vez hecho esto, ¡ya estamos listos para construir aplicaciones zoneless en Angular 19!

Resumen

Aprendimos cómo remover zone.js en aplicaciones existentes y cómo crear proyectos zoneless por defecto usando el flag del CLI. Espero que te animes a dar el salto y comiences a construir tus aplicaciones sin Zone.js. 😎

Código fuente: https://github.com/danywalls/zoneless-angular-app

Foto por Ad Lh en Unsplash