Cómo Actualizar una Aplicación de Angular

Introducción

Actualizar Angular es a priori una tarea sencilla. Sin embargo, a veces puede convertirse en un dolor de cabeza. En este artículo te voy a explicar cómo actualizar tu aplicación Angular a una major version.

Tabla de Contenidos

1. Soporte de tu versión actual
2. Guía oficial
3. Migraciones
4. Planificación de la actualización
5. Ejecución de la actualización
6. Conclusiones

Soporte de tu versión actual

El primer paso imprescindible es saber dónde te encuentras. Consulta la documentación oficial de Angular. Si tu versión no tiene soporte, es recomendable que actualices a una versión que tenga soporte cuanto antes. Estar fuera de soporte deja tu aplicación vulnerable a ataques y vulnerabilidades de seguridad.

En caso que la versión a la que quieras actualizar sea la última, te aconsejo que esperes un tiempo prudencial de 2-3 meses para que se estabilice si estás en un entorno empresarial.

¿Cómo saber la versión de Angular que tengo?

Para saber la versión de Angular que tienes en tu aplicación, puedes ejecutar el siguiente comando en la terminal dentro de la carpeta de tu aplicación:

ng --version

También puedes consultar el fichero package.json de tu aplicación. En la sección de dependencies encontrarás la versión de Angular que tienes instalada:

"dependencies": {
  "@angular/animations": "^18.1.1",
  "@angular/common": "^18.1.1",
  "@angular/compiler": "^18.1.1",
  "@angular/core": "^18.1.1",
  "@angular/forms": "^18.1.1",
  "@angular/platform-browser": "^18.1.1",
  "@angular/platform-browser-dynamic": "^18.1.1",
  "@angular/router": "^18.1.1",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.2"
  }

Guía oficial

En la web oficial de Angular existe una guía de actualización que te explica cómo actualizar desde una versión Y hasta una versión Z. Puedes encontrar el enlace en la documentación oficial de Angular. La guía es muy recomendable ya que te explica paso a paso cómo actualizar tu aplicación Angular. Te dejo algunos enlaces con detalles para la mayoría de los casos:

• v15 a v16
• v16 a v17
• v17 a v18
• v18 a v19

La gran mayoría de pasos comunes en todas las versiones son:

• Actualizar versión de TypeScript
• Actualizar la versión de Node
• Actualizar Angular CLI
• Actualizar Angular Core

Migraciones

¿Qué es una migración en Angular?

Dependiendo de la versión, tendrás acceso a nuevas funcionalidades que puedes aprovechar. Implementar estas funcionalidades implica modificar tu código base en muchos sitios de la aplicación.

Para ahorrar tiempo y errores humanos, el equipo de Angular ha creado migraciones automáticas. Estas migraciones son scripts que se ejecutan en la aplicación y modifican el código base de forma automática.

Librerías de terceros

Si tu aplicación Angular utiliza librerías de terceros, es posible que tengas que actualizarlas también. Es importante que consultes la documentación de las librerías de terceros que utilizas para saber si son compatibles con la nueva versión de Angular. Algunas de las libererías más comunes a tener en cuenta:

• Angular Material
• NgRx
• Nx
• PrimeNG
• Ngx-Translate

En este punto es dónde más bloqueos suelen surgir. Si una librería de terceros no es compatible con la nueva versión de Angular, tendrás que buscar una alternativa o esperar a que la librería se actualice.

A causa de estas dependencias, es mejor esperar a que las librerías de terceros se actualicen antes de actualizar Angular y esperar un tiempo prudente de 2-3 meses para que se estabilicen.

Planificación de la actualización

He visto que muchas veces en empresas esta parte pasa muy desapercibida. Es importante que planifiques la actualización de Angular y que todo el equipo esté alineado. Los mismos desarrolladores tendemos a pensar que es un proceso trivial y sin importancia. No lo es.

1. Reunir la información

Antes de actualizar, necesitas reunir toda la información posible. Consulta la documentación oficial de Angular, la guía de actualización, la lista de features y la lista de migraciones.

Con toda esta información el equipo puede hacerse una idea de las implicaciones de la actualización y estimar los tiempos necesarios para llevarla a cabo y priorizarla o no durante las sesiones de Sprint Planning.

2. Features

En Angular hay muchas features nuevas que se dividen en tres tipos:

• Estable: Listas para producción. Siguen políticas de compatibilidad, deprecación y soporte.
• Developer Preview: Totalmente funcionales y pulidas, pero no están listas para estabilizarse bajo la política normal de deprecación.
• Experimental: Podrían no llegar a ser estables o tener cambios significativos antes de estabilizarse.

Mi opinión siempre es que implementes las features estables. Las otras dos categorías pueden cambiar. Si esto ocurre lo mejor que puede pasar es tener que reescibir código. Lo peor es que tu aplicación deje de funcionar en puntos críticos porque finalmente la feature se descarta.

Personalmente, consulto la lista de features aquí. Este sitio web hace seguimiento de las features de Angular y te dice si están listas para producción o no de forma gráfica y rápida.

3. Entornos

Necesitas si o sí los siguientes entornos:

• Desarrollo: Puedes probar las nuevas features y migraciones. Suele ser tu entorno local.
• Preproducción/Test: Puedes probar la aplicación con datos reales que vengan de producción.

El entorno de test es el más importante. Es el que más se parece a producción. Si algo falla en preproducción, fallará en producción.

Ejecución de la actualización

1. Aplicar actualizaciones

En este punto lo que te interesa es que tu aplicación siga funcionando. No te preocupes por las nuevas features. El objetivo es pasar con lo básico.

Lo más recomendable es que hagas una rama nueva en tu repositorio y vayas aplicando los cambios de la guía en esa rama. No lo hagas en la rama principal.

Sigue la guía oficial de actualización y no te saltes ningún paso. Empieza por TypeScript, sigue por Node, Angular CLI y Angular Core.

Luego, aplica las actualizaciones correspondientes a las librerías de terceros si aplica. Antes de aplicar las actualizaciones, debes tener las actualizaciones del core de angular estables. Si no puede pasarte que no sepas si el error es de Angular o de la librería de terceros.

2. Estabiliza

Es posible que surjan errores en la aplicación. Estabiliza el código antes de seguir adelante. Un buen set de pruebas unitarias y end-to-end te ayudarán a detectar errores. Cuanto más automatizadas estén las pruebas, mejor.

Aquí los desarrolladores tendemos a refactorizar código. No lo hagas. El objetivo es que la aplicación siga funcionando. Cada vez que tengas algo estable, haz un commit y sigue adelante. Progresivo y constante.

3. Pruebas

Una vez el código está estable es momento de hacer las pruebas funcionales. Desde mi punto de vista las acciones que se deben llevar a cabo son:

• Desplegar el código en un entorno de preproducción.
• Probar con datos que pueden ser ficticios o modificados. Deben tener la misma estructura y contenido que en producción.
• Probar las funcionalidades críticas de la aplicación.
• No mezclar nuevas funcionalidades durante la actualización.

A esto se le llama pruebas de regresión. El objetivo es que la aplicación siga funcionando igual que antes de la actualización. A nivel más granular las pruebas funcionales que aconsejo realizar son:

• Seguridad (autenticación y autorización)
• Formularios
• Modales
• Desplegables
• Visualización de datos
• Pruebas de rendimiento
• CSS y estilos

En las pruebas es imprescinidble que colaboren equipos de desarrollo, QA y negocio. Cada uno tiene una perspectiva diferente de la aplicación. Los desarrolladores somos responsables de decir a la aplicación lo que hace. Los QA son responsables de decir si la aplicación hace lo que tiene que hacer. Negocio es responsable de decir si la aplicación hace lo que tiene que hacer para el usuario final.

El código es responsabilidad de todos.

4. Despliegue

Una vez que las pruebas funcionales han pasado con éxito, es momento de desplegar la aplicación en producción. Es recomendable que hagas un despliegue en un horario de baja actividad. Si algo falla, tendrás tiempo para solucionarlo También es importante que tengas un plan de contingencia. Si algo falla, tienes que poder volver a la versión anterior. Lo que típicamente llamamos un rollback.

En los siguientes 4-5 días será fundamental monitorizar la aplicación. Es posible que surjan errores que no se han detectado en las pruebas. Si esto ocurre hay que solucionarlos lo antes posible. Para ello asegurate de tener a todo el equipo alineado con una buena comunicación y dar prioridad a los errores críticos.

5. Post-despliegue

Una vez la aplicación está muy estable será momento de valorar e implementar las nuevas features si así lo decide el equipo. Es importante que las implementes de una en una. No implementes todas las features a la vez. Si implementas todas las features a la vez y algo falla, no sabrás qué ha fallado.

Conclusiones

Las siguientes conclusiones son las que he sacado de mi propia experiencia:

• Separa el grano de la paja. No todas las features son necesarias.
• Actualizar Angular es un proceso que requiere tiempo y planificación.
• Parece un proceso trivial.
• Todo el equipo debe estar alineado.
• Haz pruebas funcionales y de regresión.
• Ten un plan de contingencia.
• Monitoriza la aplicación.
• No mezcles nuevas features durante la actualización.