Angular 14: fin de soporte y cómo actualizar

Angular 14 introdujo los componentes standalone en developer preview y los formularios reactivos tipados. No tiene soporte desde noviembre de 2023.

Fechas de lanzamiento y soporte

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

• Componentes standalone en developer preview. Con standalone: true, los componentes, directivas y pipes declaran sus propios imports sin un NgModule.
• Formularios reactivos tipados. FormControl, FormGroup y FormArray llevan los tipos de sus valores. Los formularios existentes se migran a clases Untyped para que el cambio pueda ser gradual.
• Títulos de página en el router con Route.title y un TitleStrategy personalizado.
• Diagnósticos extendidos que avisan sobre errores comunes en templates, como los corchetes invertidos del two-way binding.
• Binding a miembros protegidos del componente desde los templates.
• Novedades del CLI: ng completion, ng cache y ng analytics. Los flags se aceptan solo en kebab case en minúsculas.
• CDK Menu y Dialog pasan a estables.
• Un builder experimental basado en esbuild.
• Soporte para TypeScript 4.7 y ES2020 como target por defecto.

Qué revisar al actualizar

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.
• El compilador agrega el scope del componente como prefijo a los nombres de @keyframes, lo que rompe el código TypeScript que depende de esos nombres.
• Angular Material 15 se basa en MDC. Cambian el DOM y las clases CSS de muchos componentes. Los componentes anteriores siguen disponibles con imports legacy.
• providedIn: 'any', providedIn con un NgModule y RouterLinkWithHref quedan deprecados.

De 15 a 16:

• Se requieren Node.js 16.14 o 18.10 y posteriores, TypeScript 4.9.3 o posterior y Zone.js 0.13 o posterior.
• Se elimina ngcc, así que las librerías compiladas con View Engine dejan de funcionar.
• Se eliminan estas APIs: entryComponents, ANALYZE_FOR_ENTRY_COMPONENTS, ReflectiveInjector, renderModuleFactory y BrowserTransferStateModule.
• XhrFactory debe importarse desde @angular/common.
• Las pruebas reciben MockPlatformLocation por defecto.
• ngTemplateOutletContext tiene una verificación de tipos más estricta.

Un plan corto de actualización

1. Actualiza al último parche de 14.x, confirma que el build y las pruebas pasan, y haz commit.
2. Lista todas las librerías de terceros y revisa si se publicaron para Ivy. Esa lista define qué tan difícil será la v16.
3. Ejecuta ng update @angular/core@15 @angular/cli@15 y luego ng update @angular/material@15.
4. Revisa las pantallas que usan Angular Material y corrige los estilos sobrescritos. Usa los imports legacy solo como medida temporal.
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 15.

Cuándo conviene pedir ayuda

Los dos pasos que siguen a la v14 traen dos cambios grandes: los componentes de Material basados en MDC en la v15 y la eliminación de ngcc en la v16. Conviene pedir ayuda si el diseño depende de componentes de Material personalizados, si hay librerías clave sin versión para Ivy, o si el equipo quiere adoptar componentes standalone dentro del mismo esfuerzo. El plan está en Estrategia para actualizar versiones antiguas de Angular.

Más en esta sección

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