Actualiza a Angular 14

Cómo migrar nuestros proyectos de Angular 13 a 14

¿Qué trae de nuevo Angular 14?

De todo lo que he leído en la documentación de esta nueva versión lo que más me ha llamado la atención es la de crear aplicaciones orientada a componentes, es decir, sin módulos.

Es parecido a como trabaja React 🤯

También trae temas interesantes como definir ahora los guards como funciones en lugar como una clase.

¿Cómo sabemos con qué versión de Angular estamos trabajando?

Podemos ver qué versión de Angular es con la que estamos trabajando de las siguientes formas:

Con el package.json

Abriendo el package.json, en la sección de las dependencias encontraremos el Angular Core y ahí podremos ver la versión de Angular

"@angular/animations": "~13.0.0",
"@angular/cdk": "^13.0.3",
"@angular/common": "~13.0.0",
"@angular/compiler": "~13.0.0",
"@angular/core": "~13.0.0"

Ejecutando la aplicación

Ejecutando la aplicación y en con las herramientas de depuración del navegador, podremos ver en la inspección de elementos el ng-version

<app-root _nghost-serverapp-c137="" ng-version="13.0.0">...

Con el CLI

Ejecutando el comando ng version en la consola en el directorio de trabajo, ello te facilitará toda la información de tu proyecto de Angular

¿Cómo actualizar/migrar a Angular 14?

Voy a seguir las recomendaciones del equipo de Angular en su página de actualización de Angular

Para actualizar mi aplicación de Angular 13 a Angular 14 que incluye Angular Material seguiré los siguiente pasos:

1. ng update @angular/core @angular/cli

2. ng update @angular/material

Actualizar Angular CLI de manera global

Te recomiendo actualizar tu Angular CLI de manera global y así, cada vez que crees un proyecto nuevo lo harás con la última versión de Angular

Para actualizar Angular CLI de forma global sigue los siguientes pasos:

1. Desinstala Angular CLI

   npm uninstall -g @angular/cli

2. Limpia el cache de npm, y así cuando instalemos la nueva versión de Angular CLI nos aseguramos de que está limpia

   npm cache clean --force

3. Instala la última versión estable de Angular CLI

   npm i -g @angular/cli

4. Comprueba que se ha instalado la última versión

   ng version

Puedes encontrar más información acerca de Angular CLI en su página oficial de npm

Posibles errores

• Package '@angular/core' is not a dependency; es posible que no tengas la carpeta node_modules debido a que has clonado el repositorio. Para solventarlo instala las depencias de proyecto con:

  npm install

Cuando todo falla

Si no consigues migrar con ninguno de los pasos anteriores, el procedimiento que uso es:

1. Eliminar la carpeta node_modules
2. Eliminar el fichero package-lock.json

3. Modificar las dependencias de mi proyecto de Angular que quiero migrar copiando las versiones del proyecto de la nueva versión de 🅰

   En este caso, las dependencias en el package.json que no te fallarán serán:

   "dependencies": {
     "@angular/animations": "^14.2.0",
     "@angular/cdk": "^14.2.2",
     "@angular/common": "^14.2.0",
     "@angular/compiler": "^14.2.0",
     "@angular/core": "^14.2.0",
     "@angular/forms": "^14.2.0",
     "@angular/material": "^14.2.2",
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",  
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.2.3",
     "@angular/cli": "~14.2.3",
     "@angular/compiler-cli": "^14.2.0",  
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.7.2"
   }
               

4. Instalar dependencias con npm install

No es lo más rápido, pero funciona.

Hasta luego 🖖