Angular 16: fin de soporte y cómo actualizar

Angular 16 trajo Signals en developer preview, la hidratación no destructiva y la eliminación de ngcc. No tiene soporte desde noviembre de 2024.

Fechas de lanzamiento y soporte

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

• Signals en developer preview. signal, computed y effect llegaron a @angular/core, con toSignal, toObservable y takeUntilDestroyed en @angular/core/rxjs-interop.
• Hidratación no destructiva en developer preview para apps con server-side rendering, activada con provideClientHydration().
• Herramientas para standalone. Un schematic de migración, ng generate @angular/core:standalone, y ng new --standalone.
• El sistema de build basado en esbuild en developer preview, con Vite como servidor de desarrollo.
• Soporte experimental para Jest en pruebas unitarias.
• Inputs requeridos con @Input({ required: true }), y datos de la ruta enlazados a inputs del componente.
• DestroyRef, etiquetas de cierre automático en templates y un nonce de CSP para estilos inline.
• Soporte para TypeScript 5.0, y la eliminación de ngcc.

Qué revisar al actualizar

De 16 a 17:

• Se requieren Node.js 18.13 o posterior, TypeScript 5.2 o posterior y Zone.js 0.14 o posterior.
• Los componentes legacy de Angular Material no forman parte de Material 17. Angular 17 puede correr con Material 16 como opción temporal que termina con la v18.
• Los imports profundos de Zone.js como zone.js/dist/zone deben pasar a zone.js y zone.js/testing.
• Las opciones del router como urlUpdateStrategy se configuran con provideRouter o RouterModule.forRoot.
• NgSwitch compara con ===.
• El código que usaba mutate en un signal debe usar update.

De 17 a 18:

• Se requieren Node.js 18.19 o posterior y TypeScript 5.4 o posterior.
• El helper de pruebas async se reemplaza por waitForAsync.
• StateKey y TransferState se importan desde @angular/core.
• Las pruebas pueden ejecutar rondas adicionales de detección de cambios, y ComponentFixture.whenStable puede esperar más que antes.
• En server-side rendering, platformDynamicServer se reemplaza por platformServer y se elimina ServerTransferStateModule.
• Angular Material 16 deja de ser una opción, así que los componentes legacy deben estar migrados para entonces.

Un plan corto de actualización

1. Actualiza al último parche de 16.2.x, confirma que el build y las pruebas pasan, y haz commit.
2. Pasa las máquinas locales y el CI a Node.js 18.13 o posterior.
3. Ejecuta ng update @angular/core@17 @angular/cli@17 y luego ng update @angular/material@17.
4. Mantén por ahora el builder basado en webpack. El paso al application builder basado en esbuild es un cambio aparte, con sus propias pruebas.
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 17.

Cuándo conviene pedir ayuda

Desde la v16, buena parte del trabajo que lista la guía oficial de actualización tiene que ver con pruebas y herramientas. Conviene pedir ayuda si las pruebas unitarias dependen de los tiempos de la detección de cambios, si la app usa server-side rendering con Angular Universal, o si el equipo quiere un plan para adoptar Signals, componentes standalone y el nuevo sistema de build en el orden correcto. El plan está en Estrategia para actualizar versiones antiguas de Angular.

Más en esta sección

• Angular 17: fin de soporte y cómo actualizar
• Angular 18: fin de soporte y cómo actualizar
• Angular 19: fin de soporte y cómo actualizar
• Angular 20: fin de soporte y cómo actualizar