Actualiza a Angular 13

Veremos qué hay de nuevo en esta versión 13 de Angular y cómo migrar nuestros proyectos de Angular 12 a 13

¿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:

• 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": "~12.0.0",
  "@angular/cdk": "^12.0.3",
  "@angular/common": "~12.0.0",
  "@angular/compiler": "~12.0.0",
  "@angular/core": "~12.0.0"

• 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="12.0.0">...

• 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

¿Qué trae de nuevo esta versión?

• Mejor optimización y rendimiento gracias a Ivy
• Estandarización a ES2020
• Se deja de dar soporte a Internet Explorer 11
• Persistencia en caché por defecto
• Uso de RxJs 7.4 por defecto al crear proyectos con ng new. Para actualizar proyectos antiguos npm install [email protected]
• TypeScript 4.4
• ...

Puedes ampliar información aquí.

Al turrón

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 12 a Angular 13 que incluye Angular Material seguiré los siguiente pasos:

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

2. ng update @angular/material

3. npm install [email protected]

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

Method Promise.prototype.then called on incompatible receiver [object Object]

Actualizando este blog a Angular 13, me encontré a la hora de prerenderizar mis rutas con Angular Universal este error.

El problema era que estaba corriendo la versión de Angular 13.3.11 con un Node 16.18.1

Por lo visto hay un bug reconocido con la versión de Node superior a la 16.18.0 con lo que hice para solucionarlo fue bajar la versión de mi Node a la 16.17.1

Puedes leer más acerca de este bug aquí.

Para actualizar tu Node 👇

cinst nodejs.install -Version 16.17.1

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 🖖