Cómo actualizar a Angular 6 y no morir en el intento

Si bien es cierto que mantener nuestras aplicaciones actualizadas es una de las labores más importantes para optimizar el rendimiento y la seguridad de nuestra aplicación, en ocasiones puede convertirse un auténtico calvario.

Este es el caso de la última versión de Angular, en el cual se han añadido varios cambios a nivel de arquitectura que, si bien no influyen a la hora de desarrollar una nueva app, puede dar algunos problemas a la hora de pasarnos a la nueva major version.

Desde el equipo de Angular quieren ponernos las cosas fáciles, así que han desarrollado una utilidad para simplificar este proceso y que nos indique los pasos que debemos dar para actualizar todo su ecosistema:

Sin embargo, nuestras aplicaciones no usan única y exclusivamente Angular, sino que existen más librerías como puede ser Ngrx para gestionar el flujo de estado, Angularfire2 para consumir Firebase, etc. Y estas pueden quedar fuera del ámbito alcanzable del héroe rojo.

El principal problema de esta actualización radica en la librería Rxjs, que también ha sufrido un cambio a la versión 6, y nuestro ecosistema, o el código existente puede verse comprometido.

Así pues, vamos a pasar a comentar como solucionar estos percances.


Cambiar la versión

En primer lugar (y como la rueda ya ha sido inventada), utilizaremos la herramienta de Angular para actualizar nuestra aplicación. Para ello, nos dirigiremos a la página indicada anteriormente y rellenaremos el formulario en función de nuestras necesidades:

Ahora, haciendo uso del botón indicado en la parte inferior, se generará el listado de tareas a realizar en un formato de TODO-list, para que los más despistados vayamos marcando qué hemos hecho y que no.

Una de las cosas más interesantes es que no se trata de una simple lista, sino que nos indica a que se debe cada comando y referencia a la configuración oficial.

Con esto habremos actualizado la versión de Angular correctamente, muy bien… ¿Y el resto? Además, al final de la actualización, nos indica que eliminemos rxjs-compat cuando todo nuestro código esté migrado.

Pero ¿que es esto de rxjs-compact? y ¿por qué eliminarlo?

Esta librería permite mantener la compatibilidad entre el código elaborado en versiones antiguas de rxjs y la actual, así que, si no queremos complicarnos, déjala instalada, y todo funcionará, sin embargo… hemos venido a jugar.

NgRx

Si utilizas esta librería, conocerás que existen varios módulos, como son: Ngrx/store, Ngrx/effects o Ngrx/entities.

Sin embargo la actualización de estos es bastante sencilla, ya que viene incluido en los paquetes de ng update y deberíamos haberlo realizado en el paso anterior, no obstante, vamos a recordar :

Firebase y AngularFire2

Si eres usuario de Firebase, estas dos librerías te habrán dado la vida, ya que permiten consumir dicho servicio de manera rápida y sencilla, pero una vez más aparece nuestro viejo amigo rxjs.

La solución es bastante sencilla, basta con actualizar a la versión 5 de firebase y a la 5 de AngularFire2 (actualmente release candidate), ya que ambas tienen una dependencia con la ya familiar librería en discordia. Tenemos 2 opciones, o actualizamos a estas versiones directamente, o nos vamos a la última disponible.

Fácil, sencillo y para toda la familia.

Código

Aquí llega la autentica dificultad, todos estos pasos y herramientas están muy bien, incluso hay parte de nuestro código que habrá sido migrado automáticamente a esta nueva versión de Rxjs, pero no todo es tan bonito, existen determinados patrones que no se pueden modificar automáticamente.

Antes de empezar debemos saber que los imports han cambiado, donde antes utilizábamos:

Ahora se encuentra en:

Así bien, si eres nuevo y aún no has terminado de entender los operadores, este cambio puede resultarnos un poco más complejo, pues ha cambiado la forma de tratar los Observables. Anteriormente bastaba con el operador map y era cuestión de ir encadenando operadores.

Ahora, esto cambia y map, es embebido por pipe, el cual recibe por parámetro el conjunto de operadores:

Por otro lado, donde antes utilizábamos los métodos del Observable tal que así:

Ahora se utilizará el método directamente:

Y por último, el operador catch(), es reemplazado por algo un poco más verbose como catchError().

Es decir, en un caso real esto pasaría de:

a:


Conclusión

Si bien la gente de Angular pone a nuestra disposición todas las facilidades para que actualicemos a la nueva versión, hay determinadas acciones que no se pueden automatizar y que debemos tratar con especial cariño a la hora de modificarlo.

La principal complejidad y fuente de problemas en la migración radica en rxjs, sin embargo, basta con saber en que consiste el cambio y aplicarlo.

Espero que este artículo te haya servido de ayuda para agilizar este tedioso proceso. Si ha sido así, no dudes en darle un voto positivo compartirlo en tus redes sociales para llegar a más gente.

También puedes encontrarme en mis redes sociales de Twitter y Linkedin:

Adrián Ferrera González

Written by

Full Stack Developer. JavaScript ❤️ (adrian.afergon@gmail.com)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade