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?

¿Qué trae nuevo Angular 15?

Interceptors como funciones

Ahora es posible añadir interceptor como una función, no es necessario hacerlo como una clase, aunque sigue siendo válido hacerlo como clase.

Standalone components

La verdad es que esta función ya la traía la versión 14, pero era experimental.

Con la versión 15 de Angular se confirma que los componentes standalone han venido para quedarse.

Puedes leer a profundidad en mi siguiente artículo 👇

Componentes standalone en Angular 🅰

¿Se ha rendido Angular ante React?

¿Y los ficheros environments?

Cuando creas un proyecto desde 0 con Angular 15 no se crearán los famosos environment.ts y environment.prod.ts.

No me gusta, porque me obliga a crearlos manualmente, pero en fin.

Directiva para optimización de imágenes

Aún no la he podido estudiar en profundidad, pero tiene muy buena pinta.

Consulta esta directiva en la documentación oficial.

¿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="15.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.

Las depencias que te recomiendo para Angular 15 son:

"dependencies": {
    "@angular/animations": "^15.2.0",    
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/material": "^15.2.9",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@angular/service-worker": "^15.2.0",
    "firebase": "^9.20.0",
    "chart.js": "^3.9.1",
    "file-saver": "^2.0.5",
    "ng2-charts": "^4.1.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.6",
    "@angular/cli": "~15.2.6",
    "@angular/compiler-cli": "^15.2.0",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.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.9.4"
  }
            

Hasta luego 🖖