Angular 12: fin de soporte y cómo actualizar

Angular 12 deprecó View Engine y fue la última versión mayor con soporte para IE11. No tiene soporte desde noviembre de 2022.

Fechas de lanzamiento y soporte

Angular 12 se publicó en mayo de 2021. El soporte activo terminó en noviembre de 2021 y el soporte de largo plazo terminó en noviembre de 2022. El equipo de Angular indicó la v12 como la opción para los proyectos que todavía necesitaban IE11, y esa ventana de soporte ya está cerrada. Las fechas de cada versión están en Soporte y fin de vida de las versiones de Angular.

Qué introdujo Angular 12

• View Engine deprecado. Las librerías compiladas con View Engine siguieron funcionando en apps Ivy, y se pidió a los autores de librerías planificar el paso a Ivy.
• El language service basado en Ivy activado por defecto.
• Nullish coalescing (??) en templates.
• Builds de producción por defecto. ng build usa producción por defecto, y el modo estricto es el valor por defecto del CLI.
• Webpack 5 listo para producción, y TypeScript 4.2.
• Cambios de estilos. Sass inline en el campo styles de un componente, y soporte para Tailwind CSS (agregado en la v11.2).
• Angular Material sobre el sistema de módulos de Sass, con una nueva API basada en @use. Los proyectos deben usar sass y dejar node-sass.
• Protractor fuera de los proyectos nuevos mientras el equipo decidía su futuro.
• Una herramienta de migración para los IDs de mensajes i18n legacy.
• IE11 deprecado, con la eliminación anunciada para la v13.

Qué revisar al actualizar

De 12 a 13:

• Se elimina View Engine y se elimina el soporte para IE11.
• Se requieren TypeScript 4.4 y Node.js 12.20 o posterior.
• Se elimina la forma de string de loadChildren. Las rutas lazy necesitan un import() dinámico.
• TestBed destruye el módulo de prueba después de cada test por defecto.
• Los observables available y activated de SwUpdate quedan deprecados.
• RxJS sigue en la v6 salvo que lo actualices. Las apps nuevas de la v13 empiezan con RxJS 7.4.

De 13 a 14:

• Se requieren TypeScript 4.6 y Node.js 14.15 o posterior.
• Los formularios pasan a ser tipados. ng update reemplaza las clases de formularios por versiones sin tipo, como UntypedFormGroup, así la app compila y agregas los tipos después.
• initialNavigation: 'enabled' pasa a 'enabledBlocking'.
• pathMatch tiene un tipo más estricto, y algunos arreglos de rutas necesitan el tipo Routes explícito.
• Los resolvers toman el primer valor que emite un observable.
• El CLI solo acepta flags en kebab case en minúsculas.

Un plan corto de actualización

1. Actualiza al último parche de 12.2.x, confirma que el build y las pruebas pasan, y haz commit.
2. Confirma que ningún cliente depende de IE11 antes de salir de la v12.
3. Ejecuta ng update @angular/core@13 @angular/cli@13 y luego ng update @angular/material@13 si usas Material.
4. Convierte las rutas con loadChildren en string y corrige las pruebas que fallan con el nuevo teardown de TestBed.
5. Actualiza las librerías de terceros, corre las pruebas y publica.
6. Repite con la siguiente versión mayor. La siguiente parada es Angular 13.

Cuándo conviene pedir ayuda

Diez versiones mayores separan a la v12 de la versión actual. Conviene pedir ayuda si la app todavía tiene parches y polyfills para IE11 repartidos por el código, si usa librerías que nunca se publicaron para Ivy, o si la actualización ya se pospuso varias veces. El plan para una actualización larga está en Estrategia para actualizar versiones antiguas de Angular.

Más en esta sección

• Angular 13: fin de soporte y cómo actualizar
• Angular 14: fin de soporte y cómo actualizar
• Angular 15: fin de soporte y cómo actualizar
• Angular 16: fin de soporte y cómo actualizar