Angular 11: fin de soporte y cómo actualizar

Angular 11 agregó el inlining de fuentes, un hot module replacement más simple y el primer paso para dejar TSLint. No tiene soporte desde mayo de 2022.

Fechas de lanzamiento y soporte

Angular 11 se publicó en noviembre de 2020. El soporte activo terminó en mayo de 2021 y el soporte de largo plazo terminó en mayo de 2022. Hoy no recibe parches de seguridad. Las fechas de cada versión están en Soporte y fin de vida de las versiones de Angular.

Qué introdujo Angular 11

• Inlining automático de fuentes. El CLI descarga e inserta en el build las fuentes enlazadas en la aplicación.
• Test harnesses para todos los componentes de Angular Material.
• HMR más simple. El hot module replacement arranca con ng serve --hmr, sin configuración adicional.
• Builds más rápidos, con un paso de ngcc más veloz y TypeScript 4.0.
• Soporte experimental para webpack 5. El equipo no lo recomendaba para producción en esta versión.
• TSLint y Codelyzer deprecados. El anuncio señaló a angular-eslint como el camino de migración.
• IE9, IE10 e IE Mobile eliminados. IE11 quedó como la única versión de Internet Explorer soportada.
• Una vista previa del language service basado en Ivy.

Qué revisar al actualizar

De 11 a 12:

• Se requiere TypeScript 4.2, y Node.js 10 deja de estar soportado.
• XhrFactory pasa de @angular/common/http a @angular/common.
• ng build genera un build de producción por defecto en proyectos nuevos, y el modo estricto pasa a ser el valor por defecto del CLI.
• Los proyectos que usan Angular Material deben pasar de node-sass al paquete sass.
• Las apps con traducciones deberían dejar los IDs de mensajes i18n legacy con la herramienta de migración.
• Los proyectos nuevos ya no incluyen Protractor.
• El soporte para IE11 queda deprecado.

De 12 a 13:

• Se elimina View Engine. Todo compila con Ivy.
• Se elimina el soporte para IE11. ng update quita los polyfills específicos de IE.
• Se requieren TypeScript 4.4 y Node.js 12.20 o posterior.
• Las rutas lazy ya no pueden usar la forma de string de loadChildren. Necesitan un import() dinámico.
• TestBed destruye el módulo de prueba después de cada test por defecto, lo que puede dejar a la vista pruebas que dependían de estado sobrante.
• RxJS 7.4 es el valor por defecto para apps nuevas. Las apps existentes siguen en RxJS 6 hasta que lo actualices tú.

Un plan corto de actualización

1. Actualiza al último parche de 11.2.x, confirma que el build y las pruebas pasan, y haz commit.
2. Pasa las máquinas locales y el CI a Node 12.14 o 14.15 y posteriores.
3. Ejecuta ng update @angular/core@12 @angular/cli@12 y luego ng update @angular/material@12 si usas Material.
4. Reemplaza TSLint por ESLint en un cambio separado, antes de seguir avanzando.
5. Actualiza las librerías de terceros, corrige las deprecaciones, corre las pruebas y publica.
6. Repite con la siguiente versión mayor. La siguiente parada es Angular 12.

Cuándo conviene pedir ayuda

El paso que merece planificación desde la v11 es la v13, porque elimina View Engine e IE11 a la vez. Conviene pedir ayuda si hay clientes que todavía usan IE11, si la suite e2e corre en Protractor, o si la app es una de varias que comparten librerías y tienen que avanzar juntas. El orden de trabajo está en Estrategia para actualizar versiones antiguas de Angular.

Más en esta sección

• Angular 12: fin de soporte y cómo actualizar
• 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