Mejores Prácticas en Angular: De la 18 a la 22 y la Era Zoneless

Angular ha vivido una transformación profunda en poco más de un año. Si vienes de Angular 16 o anterior, es probable que aún pienses en NgModules, zone.js y detecciones de cambios globales. Pero entre la versión 18 y la actual 22, el framework ha cambiado tanto que merece la pena repasar el camino recorrido y entender por qué el rendimiento actual es, literalmente, otro mundo.

El viaje: de Angular 18 a Angular 22

Angular 18: la señal de cambio

Angular 18 marcó un punto de inflexión. Las Signals (introducidas como developer preview en la 16 y estabilizadas progresivamente) empezaban a demostrar que Angular podía ser reactivo sin depender de zone.js. Esta versión también consolidó los Standalone Components como la forma predeterminada de escribir componentes, deprecando oficialmente los NgModules.

Además, Angular 18 trajo mejoras significativas en el servidor-side rendering (SSR) con @angular/ssr y sentó las bases para la reactividad granular que definiría las versiones siguientes.

Angular 19: Signals en producción

Con Angular 19, las Signals dejaron de ser experimentales. El nuevo control flow (@if, @for, @switch) reemplazó a *ngIf, *ngFor y *ngSwitch, ofreciendo sintaxis más limpia y mejor rendimiento en compilación. Los component inputs basados en Signals (input()) y los model inputs (model()) empezaron a reemplazar el viejo @Input() y @Output(), dando paso a una reactividad más explícita y predecible.

Angular 20-21: la transición a zoneless

Las versiones 20 y 21 fueron la rampa de despegue. Angular introdujo zoneless change detection como una opción real. Los ɵzoneless providers y las APIs experimentales permitieron a los equipos valientes probar aplicaciones sin zone.js. El resultado fue notable: eliminación de la detección de cambios global (que escaneaba toda la aplicación en cada evento asíncrono) y reemplazo por actualizaciones quirúrgicas, solo donde cambió el dato.

Angular 22: 100% zoneless y mucho más

Angular 22 es el destino de este viaje, y es probablemente la versión más cargada de novedades en la historia reciente del framework. Zoneless es ahora el modo por defecto: no más zone.js en los polyfills, no más detecciones de cambios que recorren todo el árbol de componentes porque “algo pasó”. Angular sabe exactamente qué cambió y actualiza solo eso.

Pero zoneless no es lo único. La v22 trae consigo un conjunto de características que redefinen cómo escribimos aplicaciones Angular:

Signal Forms (estable): El nuevo sistema de formularios basado en Signals es ahora production-ready. Combina lo mejor de Reactive Forms con la reactividad granular de las Signals. Los formularios ahora son declarativos, tipados fuertemente y se integran de forma nativa con el resto del ecosistema de Signals.

resource y httpResource (estables): La reactividad asíncrona llega para quedarse. resource permite definir cargas de datos asíncronas como si fueran Signals, y httpResource lleva esto al HTTP de forma declarativa. El resultado: fetch de datos sin suscripciones manuales, sin async pipe, sin subscribe(). El dato llega, la vista se actualiza.

El nuevo decorador @Service(): Adiós a @Injectable({ providedIn: 'root' }). Ahora basta con @Service() para definir un singleton global. Más limpio, más legible, más intencional.

injectAsync: Inyección de dependencias asíncrona. Los servicios pueden cargarse bajo demanda con code splitting, igual que hacías con rutas pero ahora también con servicios. Perfecto para features pesados que solo se necesitan cuando el usuario los invoca.

@boundary (developer preview): Error boundaries llegan a Angular. Puedes envolver componentes inestables en un @boundary y capturar errores con un fallback, evitando que un componente roto rompa toda la página. Es el equivalente al ErrorBoundary de React, pero nativo de Angular.

OnPush por defecto: En nuevas aplicaciones, OnPush es la estrategia de detección de cambios por defecto. Ya no necesitas declararlo explícitamente. Y ChangeDetectionStrategy.Default pasa a llamarse ChangeDetectionStrategy.Eager para que quede claro qué hace cada una.

Mejoras en el Router: Integración con la Navigation API nativa del navegador, limpieza automática de injectores de rutas inactivas y destroyDetachedRouteHandle para liberar memoria de forma explícita.

Sintaxis spread en templates, arrow functions y comentarios en elementos: Los templates de Angular 22 son más expresivos que nunca. Puedes usar {...objeto}, pasar arrays con [...base, 'nuevo'], llamar funciones con arrow functions inline y añadir comentarios dentro de los elementos HTML.

Signal Store: la nueva forma de organizar estado

Si hay un patrón que se ha consolidado en Angular 22, es el Signal Store: servicios basados en Signals que centralizan y exponen el estado de la aplicación de forma reactiva, sin necesidad de librerías externas como NgRx.

El concepto es simple pero poderoso: en lugar de dispersar estado en componentes con subscribe() o depender de stores pesados con actions, reducers y effects, creas un servicio que encapsula Signals y los expone de forma controlada.

@Service()
export class ProductStore {
  // Estado privado: solo el store puede mutarlo
  private products = signal<Product[]>([]);
  private filter = signal<string>('');

  // Estado público de solo lectura
  readonly allProducts = this.products.asReadonly();
  readonly filteredProducts = computed(() =>
    this.products().filter(p =>
      p.name.toLowerCase().includes(this.filter())
    )
  );

  // Acciones: la única vía para cambiar el estado
  loadProducts() {
    this.products.set(/* fetch data */);
  }

  updateFilter(query: string) {
    this.filter.set(query);
  }
}

¿Por qué es diferente a NgRx o a un servicio tradicional?

• Vs. NgRx: No hay boilerplate. Sin actions, sin reducers, sin effects, sin selectors. El estado es un signal, lo derivado es un computed, las acciones son métodos. Punto.
• Vs. servicio tradicional con BehaviorSubject: No necesitas async pipe, no hay suscripciones manuales que limpiar, y la detección de cambios es automática y quirúrgica en modo zoneless.
• Organización de archivos: El patrón recomienda un archivo store por feature o bounded context. El store es el contrato de estado de esa feature. Los componentes solo consumen lo que el store expone como readonly.

La estructura típica de una feature con Signal Store queda así:

products/
  ├── products.store.ts      ← Estado y lógica
  ├── products.component.ts  ← Vista
  ├── products.component.html
  └── products.service.ts    ← Llamadas HTTP (si aplica)

El store centraliza el estado, el servicio maneja la comunicación con APIs, y el componente se limita a leer Signals y disparar acciones. Cada archivo tiene una responsabilidad clara, y el flujo de datos es unidireccional y predecible.

7 tips para aprovechar Angular 22 al máximo

1. Migra a Signals de forma progresiva, pero sin mirar atrás. Las Signals no son una alternativa a zone.js: son mejor que zone.js. Empieza usando input() en lugar de @Input(), output() en lugar de @Output(), y computed() para derivar estado. No mezcles el modelo mental viejo (OnPush + async pipe) con el nuevo. Cuanto más rápido adoptes Signals, más rápido desaparecen los bugs de detección de cambios.

2. Usa el nuevo control flow sin excepciones. @if, @for y @switch no solo son más legibles — compilan a código más eficiente porque Angular puede optimizarlos en tiempo de compilación. En Angular 22, @switch soporta múltiples casos compartidos (@case ('A') @case ('B') { ... }) y verificación exhaustiva con @default never. Reemplaza todos los *ngIf, *ngFor y *ngSwitch de tu proyecto. Es un refactor seguro y el rendimiento mejora de inmediato.

3. Adopta Signal Store como tu patrón de estado. Crea un *.store.ts por feature. Expón Signals de solo lectura, usa computed() para datos derivados y métodos para las acciones. Este patrón elimina la necesidad de NgRx en la mayoría de aplicaciones, reduce el boilerplate a casi cero y hace que el flujo de datos sea tan simple como: acción → estado cambia → vista se actualiza. Sin suscripciones, sin pipes, sin memory leaks.

4. Usa resource y httpResource para datos asíncronos. Adiós al patrón subscribe() + variable temporal + async pipe. Con httpResource, defines una URL que reacciona a Signals y Angular se encarga de todo: loading, error, refetch y caching básica. El código pasa de 15 líneas a 3, y el resultado es más predecible.

5. Elimina zone.js de tu proyecto. Si estás en Angular 19+, configura provideZonelessChangeDetection() en tus providers, elimina zone.js de polyfills en angular.json y ejecuta tus tests. La mayoría de las aplicaciones modernas funcionarán sin cambios. Si encuentras componentes que dependen de detección de cambios automática (porque usan APIs asíncronas sin Signals), esos son los puntos exactos que debes migrar. En Angular 22, las apps nuevas ya nacen zoneless por defecto.

6. Aprovecha injectAsync para code splitting de servicios. Si tienes un servicio pesado (un generador de reportes, un editor complejo, una librería de gráficos), cárgalo solo cuando se necesite. injectAsync(() => import('./heavy-service')) divide el bundle automáticamente y el usuario no paga el costo de código que no usa. Puedes incluso hacer prefetch con { prefetch: onIdle }.

7. Usa @boundary para componentes críticos. Cuando @boundary llegue estable, envuelve componentes inestables o de terceros en un @boundary con un fallback. Un widget promocional que falla no debería romper todo el checkout. Es seguro, declarativo y nativo del framework. Mientras tanto, empieza a identificar qué componentes se beneficiarían de este patrón.

¿Qué significa esto para tu equipo?

La transición de Angular 18 a 22 no es solo una actualización de versión: es un cambio de paradigma. El código que escribías en Angular 16 (con zone.js, NgModules, async pipes) funciona de forma conceptualmente diferente al código que escribes en Angular 22 (con Signals, zoneless, control flow nativo, Signal Forms, @Service, resource y httpResource).

Para un desarrollador, esto significa aplicaciones más rápidas, menos bugs de detección de cambios, formularios tipados y reactivos sin boilerplate, fetch de datos declarativo y un modelo mental más simple: el dato cambia → la vista se actualiza. Punto. No hay magia, no hay “¿por qué se ejecutó esto tres veces?”.

Para un reclutador de IT, significa que un perfil con experiencia en Angular 22+ no es “otro frontend” — es alguien que entiende reactividad moderna, rendimiento quirúrgico, arquitectura de componentes standalone, state management basado en Signals y APIs asíncronas reactivas. Ese conocimiento es transferible a otros ecosistemas (SolidJS, Vue Composition API, Svelte) y representa un salto cualitativo respecto al Angular tradicional.

La nueva realidad

Angular 22 es, probablemente, la versión más completa y rápida en la historia del framework. El adiós a zone.js, la llegada de Signal Forms, resource/httpResource, @Service, injectAsync y @boundary forman un ecosistema donde Angular compite de tú a tú con cualquier framework moderno en rendimiento, ergonomía y experiencia de desarrollo.

Si tu equipo aún no ha migrado, el camino es claro: Signals → Standalone → Control Flow → Signal Store → Zoneless. Cada paso mejora tu aplicación. Y el destino es un Angular que no reconocerías si vinieras de la versión 15.