Angular 13: fin de soporte y cómo actualizar

Angular 13 eliminó View Engine y dejó de soportar IE11. No tiene soporte desde mayo de 2023 y está nueve versiones mayores detrás de la actual.

Fechas de lanzamiento y soporte

Angular 13 se publicó en noviembre de 2021. El soporte activo terminó en junio de 2022 y el soporte de largo plazo terminó en mayo de 2023. 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 13

• View Engine eliminado. Ivy pasó a ser el único compilador y runtime.
• Un Angular Package Format modernizado. Se eliminaron los formatos de salida antiguos y los metadatos de View Engine, la salida pasó a ES2020 y los paquetes sumaron Node package exports. Las librerías compiladas con el formato nuevo ya no necesitan ngcc.
• Componentes dinámicos más simples. ViewContainerRef.createComponent funciona sin inyectar ComponentFactoryResolver.
• Soporte para IE11 eliminado, lo que también quitó la necesidad de differential loading.
• Una caché de build persistente, activada por defecto en proyectos nuevos.
• RxJS 7.4 para apps nuevas y soporte para TypeScript 4.4.
• Teardown de TestBed por defecto. El módulo de prueba y el DOM se limpian después de cada test.
• Inlining de Adobe Fonts y mejoras de accesibilidad en Angular Material.

Qué revisar al actualizar

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 y UntypedFormControl, así nada se rompe y agregas los tipos de forma gradual.
• initialNavigation: 'enabled' pasa a 'enabledBlocking'.
• pathMatch tiene un tipo más estricto.
• Se elimina aotSummaries de TestBed.
• En Angular Material, MatVerticalStepper y MatHorizontalStepper se reemplazan por MatStepper.

De 14 a 15:

• Se requiere Node.js 14.20, 16.13 o 18.10 y posteriores, con TypeScript 4.8 o posterior.
• Hay que quitar enableIvy de tsconfig.json.
• Las clases base cuyos constructores usan inyección de dependencias necesitan un decorador @Injectable o @Directive.
• setDisabledState se llama siempre que se conecta un ControlValueAccessor.
• relativeLinkResolution deja de ser configurable en el router.
• Angular Material 15 se basa en MDC. Cambian el DOM y las clases CSS de muchos componentes, así que los estilos personalizados necesitan una revisión visual.

Un plan corto de actualización

1. Actualiza al último parche de 13.x, confirma que el build y las pruebas pasan, y haz commit.
2. Ejecuta ng update @angular/core@14 @angular/cli@14 y luego ng update @angular/material@14 si usas Material.
3. Deja que la migración de formularios pase a las clases Untyped. Agrega los tipos reales después, formulario por formulario.
4. Decide si pasas de RxJS 6 a RxJS 7 ahora. Angular 13 y las versiones posteriores aceptan ambos.
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 14.

Cuándo conviene pedir ayuda

Desde la v13 una buena parte del costo está en la interfaz y en las librerías. Conviene pedir ayuda si la app sobrescribe estilos internos de Angular Material en muchos lugares, porque el cambio a MDC de la v15 los toca a todos. También conviene si la app tiene muchos formularios grandes, o si comparte librerías de componentes con otras apps que deben avanzar al mismo tiempo. El plan para una actualización larga está en Estrategia para actualizar versiones antiguas de Angular.

Más en esta sección

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