Actualizando Angular

Ya casi hemos llegado a Angular 15, y yo me he encontrado que tenia un montón de ejercicios desarrollados para otras versiones de Angular… desde la 5, si. Si sois formadores y os habéis encontrado con ese problema, ya habréis descubierto lo pesado que puede ser actualizar la librería. Pues bien, os ofrezco otra forma mas corta.

Imaginaros que tenéis 10 ejercicios de Angular que preparasteis cuando trabajábamos con Angular5 y queréis utilizarlo ahora, en un curso que estáis preparando con Angular15….

Bien, nos armamos de paciencia, y entramos en nuestro primer ejercicio, Allí, deberemos actualizar las versiones, y para eso, Angular propone que lancemos las correspondientes actualizaciones sucesivamente, esto es:

• ng update @angular/cli@6 @angular/core@6
• ng update @angular/cli@7 @angular/core@7
• ng update @angular/cli@8 @angular/core@8
• …
• ng update @angular/cli@14 @angular/core@14
• ng update @angular/cli@15 @angular/core@15

Y, además vigilando que entre cada proceso, no quede nada pendiente de confirmar, cosa que no pasa porque cada una de estas ordenes, modifica el fichero package.json, por lo que después de lanzar cada una de las ordenes, has de confirmar la actualización de git de dicho modulo

Y cuando terminéis de actualizar ese ejercicio,… pues os pasáis al directorio del siguiente ejercicio y… REPETIS OTRA VEZ todos los pasos

Es un entretenimiento para un buen rato.

La alternativa

Digamos que la alternativa es un poco delicada, con lo que os dejo a vosotros la responsabilidad de si vale la pena o no usarla. Os cuento:

Cuando utilizáis «ng update», lo que esta haciendo el programa es revisar el package.json comprobando la version de cada modulo, y, las posibles modificaciones aportadas por la version.

Si el salto de version es pequeño, (1 o 2), no cuesta nada seguir las normas, y todo quedara mejor, pero cuando el salto de version es de 5 o 10, entonces, quizas te convenga el utilizar este método.

Como la idea es actualizar el package.json, igual que hace el ng update, pero mas rapido, podemos hacer:

• Creamos un nuevo proyecto con el ng new … para conseguir un package.json actual
• En cada proyecto antiguo:
  • Borramos la carpeta node-modules, y el fichero package-lock.json
  • Comparamos el package.json obtenido en la creacion del nuevo proyecto, con el existente en ese ejercicio
  • Vamos moviendo las zonas que consideremos necesarias desde el nuevo package.json al antigu
  • al terminar, salvamos el package.json, y, en la linea de comandos, lanzamos un «npm i» para instalar todos los módulos necesarios….

Para la selección, si utilizamos Visual Code, señalamos un fichero package.json, y luego, con la tecla «Ctrl» pulsada, seleccionamos el otro package.json. Tras eso, utilizamos el boton derecho de raton para «Comparar seleccionados

Ahora, debemos mover al package.json que queremos actualizar

• Todos los scripts
• Todos los módulos que figuran en el nuevo package.json borrando los que tienen el mismo nombre en el viejo package.json
• Por ejemplo, en este caso, yo no voy a destruir las líneas 22,23,y 24 del viejo package.json, ya que provienen de una inserción manual; si quiero actualizar version, lo deberé hacer de forma independiente

Y ya podemos lanzar el

Recordad que este sistema os vale para la mayoría de proyectos SENCILLOS. Y , sobre todo, en los que no hemos instalado módulos de forma manual…. pero ya lo sabéis, si trabajamos con copias de seguridad, el daño nunca será demasiado grave.