Angular 21 retiró a la vieja guardia: Karma fuera, zone.js opcional. Angular 22 va más allá: cambia lo que significa un componente por defecto.
Por primera vez, OnPush es la estrategia de detección de cambios por defecto, los parámetros de ruta fluyen por todo el árbol, y el framework redobla su apuesta por ser infraestructura amigable para agentes de IA. Esto es lo que se rompe, y cómo arreglarlo.
TL;DR — actualiza de Angular 21 a 22 en 4 pasos:
node --version # debe ser 22+ (Node 20 ya no está soportado) npm install -g @angular/cli@latest ng update @angular/core@22 @angular/cli@22 ng testLos tres cambios que más probablemente te afecten: OnPush es la nueva detección de cambios por defecto (una migración añade
ChangeDetectionStrategy.Eagera tus componentes existentes), los parámetros de ruta ahora se heredan con'always'en lugar de'emptyOnly', y Node 22 + TypeScript 6.0 son los nuevos mínimos. Detalles y soluciones abajo.
🚨 Los Breaking Changes de “Detén Todo”
1. OnPush Ahora Es el Valor por Defecto
Este es el titular filosófico de la v22. Un componente sin changeDetection antes significaba “revísame en cada ciclo”. En Angular 22 significa ChangeDetectionStrategy.OnPush.
Qué se rompe: Nada en tu código existente — si dejas que la migración haga su trabajo. ng update añade el nuevo valor ChangeDetectionStrategy.Eager (el comportamiento antiguo de check-always, ahora con nombre) a cada componente que dependía del valor por defecto anterior.
Qué cambia de verdad: Cada componente nuevo que generes será OnPush. Si los hábitos de tu equipo todavía asumen actualizaciones por mutación (“cambié la propiedad, ¿por qué no se actualiza la vista?”), la v22 es donde esos hábitos mueren.
La Solución:
- Deja que la migración automática marque
Eageren los componentes legacy. No pelees con ella durante la actualización. - Para código nuevo, adopta signals —
signal(),computed()einput()hacen que OnPush sea invisible porque los cambios se rastrean a nivel de valor. - Migra los componentes fuera de
Eagerde forma incremental. La herramientaonpush_zoneless_migrationdel servidor MCP de Angular analiza el grafo de dependencias de un componente antes de cambiar la estrategia — la cubrí en la guía de Angular MCP.
2. Los Parámetros de Ruta Se Heredan en Todas Partes
El valor por defecto de paramsInheritanceStrategy del router cambió de 'emptyOnly' a 'always'.
Qué se rompe: Las rutas hijas ahora ven todos los params y data de sus rutas padre. Si una ruta hija lee un nombre de parámetro que también existe en un padre (:id en ambos, por ejemplo), puede resolver a un valor que nunca antes había visto. Los componentes con ramas defensivas de “el param es undefined” pueden tomar silenciosamente la otra rama.
La Solución: Audita los componentes que leen params o data de la ruta. Si necesitas el comportamiento anterior, es una línea:
provideRouter(routes, withRouterConfig({
paramsInheritanceStrategy: 'emptyOnly',
}))Prefiere renombrar los parámetros que colisionan (:userId vs :orderId) antes que revertir globalmente — el valor 'always' es genuinamente mejor para páginas de detalle con deep links.
3. Node 22 y TypeScript 6.0 Son Obligatorios
Qué se rompe: El build, inmediatamente, si tu CI o tu entorno local usa Node 20 (ya en fin de vida) o TypeScript 5.9.
La Solución: Actualiza Node a 22, 24 o 26 y TypeScript a 6.0+ antes de ejecutar ng update. Revisa tus imágenes de CI, tus Dockerfiles y el campo engines — la actualización local siempre es la mitad fácil.
4. Filos Menores
- Duplicar un binding de input es un error de compilación. Enlazar el mismo input dos veces en un elemento antes se toleraba en silencio; ahora el compilador de plantillas lo rechaza.
- Los atributos
data-*ya no se tratan como property bindings — se enlazan como atributos, que casi seguro era lo que querías. - El transfer cache de HTTP omite las peticiones con credenciales por defecto (con cookies o
withCredentials), para que las respuestas autenticadas no se filtren entre sesiones de SSR. Si dependías de cachearlas, ahora tienes que optar explícitamente.
✨ Los Juguetes Nuevos: Funciones que Sí Usarás
Signal Forms Es Estable
Los avisos de experimental desaparecieron. El modelo form()/field() de la v21 es ahora la forma bendecida, tipada y signal-first de construir formularios. Si esperaste para adoptarlos en 21, la v22 es la luz verde.
resource() y httpResource Listos para Producción
Datos asíncronos como signal, con estados de carga y error incluidos. Junto con Signal Forms estable y OnPush por defecto, la arquitectura signal-first ya no es “la dirección hacia donde va Angular” — es simplemente cómo funciona Angular.
Componentes Sin Selector
Importa un componente y úsalo directamente en la plantilla — sin la indirección del selector de texto, con mejor type safety y refactors más fáciles.
La Historia Agéntica Continúa
La v22 extiende el stack MCP + Skills introducido en torno a la v21: el servidor MCP del CLI más la capa de skills que enseña a los agentes a escribir código signal-first y correcto con OnPush. He escrito sobre esto en profundidad: patrones de componentes seguros para agentes y tipos exhaustivos para agentes sin alucinaciones.
Resumen: La Checklist
- Node 22+, TypeScript 6.0+ — el entorno primero.
ng update @angular/core@22 @angular/cli@22y deja correr la migración deEager.- Audita las lecturas de parámetros de ruta (o vuelve a fijar
'emptyOnly'). - Ejecuta la suite de tests; corrige los bindings de input duplicados que el compilador ahora señala.
- Adopta Signal Forms y
resource()en código nuevo; saca componentes deEagercon el tiempo.
La checklist interactiva oficial está en angular.dev/update-guide, y el anuncio del lanzamiento en angular.dev/events/v22.
¿Vienes de una versión anterior? Empieza con Angular 21: Guía de Actualización, o consulta todas las rutas de migración en el Hub de Migraciones Angular.
