Actualizar a Angular 6 y Angular 7

Ciertamente el framework de Angular ha solucionado un extenso número de problemas desde las primeras betas de Angular 2. La versión estable que está en producción actualmente es la 7.0.0 (así es, aún sin parche con lo cual no es recomendable usarla en proyectos complejos). Quienes comenzamos a desarrollar con las betas y la rc de Angular 2 allá por el año 2016 sabemos los problemas que vinieron al actualizar de la versión 2 a la versión 4 (ya que Angular 3 jamás existió). Poco a poco las versiones mejoraron sus métodos de actualización, pero sin dudas la versión que más fichas puso en este aspecto fue Angular 6, con la inclusión del comando ng update. Pero no todo es oro lo que reluce, ¿realmente se trata de una línea de comando para dominarlos a todos, o acaso tiene implicaciones de trasfondo que requieren de la atenta mirada de un desarrollador experimentado? De eso hablaremos a continuación.

El comando ng update debe utilizarse en un proyecto de Angular, no sirve para ver actualizaciones de Angular-CLI, lo cual puede ser problemático sabiendo lo importante que es, en el universo Angular, tener el Angular-CLI global actualizado. Para ello nos aseguraremos de tener nuestro Angular-CLI en su versión estable más reciente mediante el siguiente comando (un viejo conocido):

npm install -g @angular/cli@latest

Recordar que al usar la flag global es necesario ejecutarlo con permisos de root. De esta forma, deberíamos tener la ultima estable de Angular-CLI (7.0.0), la cual coincide con el angular/core desde la versión 6 de Angular. A partir de aquí tendremos acceso al comando ng update siempre y cuando la versión Global de Angular-CLI sea 6 o superior. La versión Local de Angular-CLI (la del proyecto) puede ser anterior sin ningún problema (esa es una de las potencialidades de dicho comando). Podemos, entonces, ejecutar el siguiente comando en la carpeta root del proyecto:

ng update

Nos saldrá una lista con los paquetes disponibles para su actualización, lo cual es muy útil para que los desarrolladores podamos tener un panorama claro de las versiones que se quieren actualizar automáticamente. Revisar los change-logs de dichas versiones es una práctica más que recomendada antes de pedir la actualización, debido a las posibles incompatibilidades. Si estamos seguros de querer actualizar, podemos ejecutar nuevamente el comando pero de la siguiente manera:

ng update --all

Esto va a modificar nuestro archivo package.json, borrará los antiguos paquetes de Node y hará un npm install limpio, sin que tengamos que preocuparnos por problemas de compatibilidad ni correcciones manuales. Supone un gran cambio y un brutal ahorro de tiempo a la hora de actualizar el core de Angular y todas sus dependencias. Pero no todo es tan positivo.

Actualmente, si se hacen estos pasos de Angular 6 a Angular 7 tendremos una actualización limpia sin problemas. Pero si venimos de versiones anteriores (2, 4, incluso 5) al momento de hacer npm start es muy probable que nos encontremos con errores en los typings.

¡Ayuda! ¡Mi actualización de Angular 6 tiene errores!

Lo primero es mantener la calma. En informática no hay problemas sin solución, solo hay quebraderos de cabeza extremadamente simple y soluciones complejas. El comando update estaba lleno de bugs en un principio, pero hay cosas a tener en cuenta. Al venir de versiones anteriores a la 6 el sistema automático no comprende algunos paquetes, y se negará a actualizarlos automáticamente. La solución es similar a lo que ocurre muchas veces con npm, vamos a forzar la instalación de paquetes con el siguiente comando:

ng update --all --force

Esto forzará la instalación de paquetes, actualizando todo a la última versión estable de Angular. Pero volverán los problemas con los typings. Si al hacer npm start tenemos errores precedidos de advertencias similares a typescript@'>=2.7.0 <2.8.0' sabremos que nuestra actualización forzosa, por más que necesaria, instaló de forma automática un paquete de typescript incompatible con nuestra versión de Angular. Por ejemplo, la primer estable de Angular 6 soporta paquetes de TypeScript entre la 2.7.0 y la 2.8.0, Angular 7 ya soporta versiones superiores a la 3 de TypeScript. La solución consiste en ejecutar el siguiente comando:

npm install typescript@'>=2.7.0 <2.8.0'

Pondremos las versiones de TypeScript mínima y máxima que nos indica nuestra advertencia. Esto estabilizará nuestra implementación y lograremos ejecutar nuestro proyecto de Angular, actualizado a la versión más reciente. Ya en versiones posteriores a la 6 entendemos que el comando update tiene mejor compatibilidad y solo con ng update --all será suficiente para mantener nuestras dependencias de Angular.