Instalar o migrar a Angular 15 🅰

¿Quieres instalar Angular 15?, ¿quieres actualizar o migrar a Angular 15?, ¿quieres saber qué trae esta nueva versión de Angular?

25.11.2022 a las 06:42

Instalar o migrar a Angular 15 🅰

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

🟣 Con el package.json

🟣 Ejecutando la aplicación

🟣 Con el CLI

⚫ ¿Cómo actualizar/migrar a Angular 15?

⚫ Actualizar Angular CLI globalmente

⚫ Posibles errores

🟣 Package '@angular/core' is not a dependency

⚫ Cuando todo falla

Instalar o migrar a Angular 15 🅰

¿Quieres instalar Angular 15?, ¿quieres actualizar o migrar a Angular 15?, ¿quieres saber qué trae esta nueva versión de Angular?

¿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 varias 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": "~14.0.0",
"@angular/cdk": "^14.0.3",
"@angular/common": "~14.0.0",
"@angular/compiler": "~14.0.0",
"@angular/core": "~14.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="14.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 15?

Voy a seguir las recomendaciones del equipo de Angular en su documentación


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

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

Actualizar Angular CLI globalmente

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

Cuando todo falla, el procedimiento que uso es:

  1. Crear un nuevo proyecto con el Angular CLI actualizado a la versión de Angular que quiero
  2. Eliminar la carpeta node_modules
  3. Eliminar el fichero package-lock.json
  4. Modificar las dependencias de mi proyecto de Angular que quiero migrar copiando las versiones del proyecto creado nuevo
  5. Instalar dependencias con npm install

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


Hasta luego 🖖

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2