Angular 9: fin de soporte y cómo actualizar

Angular 9 convirtió a Ivy en el compilador y runtime por defecto. No tiene soporte desde agosto de 2021, y una app que sigue en v9 está trece versiones mayores detrás de la actual.

Fechas de lanzamiento y soporte

Angular 9 se publicó en febrero de 2020. El soporte activo terminó en agosto de 2020 y el soporte de largo plazo terminó en agosto de 2021. Desde entonces no recibe correcciones de ningún tipo, tampoco parches de seguridad. La tabla de todas las versiones está en Soporte y fin de vida de las versiones de Angular.

Qué introdujo Angular 9

• Ivy por defecto. Todas las aplicaciones pasaron al compilador y runtime Ivy.
• AOT en desarrollo. ng serve empezó a usar compilación ahead-of-time, así los builds de desarrollo tienen las mismas verificaciones que los de producción.
• Sin entryComponents. Ivy descubre por su cuenta los componentes que se crean de forma dinámica.
• Verificación de tipos más estricta en templates con los flags fullTemplateTypeCheck y strictTemplates.
• Una precedencia definida para los bindings de estilos y clases, y binding a propiedades CSS personalizadas.
• @angular/localize como el nuevo paquete de i18n.
• Component test harnesses en el CDK y Angular Material.
• Soporte para TypeScript 3.6 y 3.7, y las opciones providedIn: 'platform' y providedIn: 'any' para servicios.

Qué revisar al actualizar

De 9 a 10:

• Se requieren TypeScript 3.9, tslib 2 y TSLint 6. ng update los migra.
• Las clases que usan funcionalidades de Angular sin un decorador de Angular dejan de estar soportadas. Una migración agrega los decoradores.
• Las apps que usan i18n deben agregar @angular/localize con ng add @angular/localize.
• TestBed.get debe pasar a TestBed.inject.
• Un resolver que devuelve EMPTY ahora cancela la navegación.
• El formato de paquetes elimina los bundles esm5 y fesm5, algo que importa si compilas sin el CLI.

De 10 a 11:

• Se requiere TypeScript 4.0.
• Se elimina el soporte para IE9, IE10 e IE Mobile.
• Router: relativeLinkResolution pasa a corrected por defecto, se elimina preserveQueryParams y se eliminan los valores antiguos de initialNavigation.
• Se elimina ViewEncapsulation.Native. Usa ViewEncapsulation.ShadowDom.
• Varios pipes tienen tipos más estrictos. uppercase y lowercase lanzan un error con entradas inválidas.
• TSLint y Codelyzer quedan deprecados, así que conviene planificar el paso a ESLint.

Un plan corto de actualización

1. Actualiza al último parche de 9.1.x, confirma que el build y las pruebas pasan, y haz commit.
2. Revisa Node.js. Angular 9, 10 y 11 corren en Node 10.13 o 12.11 y posteriores. Angular 12 ya no corre en Node 10.
3. Ejecuta npx @angular/cli@10 update @angular/core@10 @angular/cli@10 y luego npx @angular/cli@10 update @angular/material@10 si usas Material.
4. Actualiza las librerías de terceros a versiones que soporten la versión mayor de destino.
5. Corrige los errores de compilación y las advertencias de deprecación, corre las pruebas y publica.
6. Repite con la siguiente versión mayor. La política oficial es una versión mayor a la vez. La siguiente parada es Angular 10.

Cuándo conviene pedir ayuda

Cada paso desde la v9 está documentado, pero son trece. Conviene pedir ayuda cuando la app tiene poca cobertura de pruebas, cuando depende de librerías que dejaron de publicar versiones, o cuando el equipo no puede pausar el desarrollo de funcionalidades durante el tiempo que toma la actualización. El orden de trabajo para una actualización larga está en Estrategia para actualizar versiones antiguas de Angular. Si una parte del producto todavía corre en AngularJS, empieza por Migración de AngularJS.

Más en esta sección

• Angular 10: fin de soporte y cómo actualizar
• Angular 11: fin de soporte y cómo actualizar
• Angular 12: fin de soporte y cómo actualizar
• Angular 13: fin de soporte y cómo actualizar