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

04.11.2021 a las 23:44

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 rxjs@7.4
  • 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 rxjs@7.4

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

Hasta luego 👋

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2