Migrar proyecto de Angular 10 a Angular 11

En este artículo te explicaré cómo migrar tus proyectos de Angular 10 a Angular 11 con los mínimos pasos posibles y te contaré qué trae de nuevo Angular 11.

15.11.2020 a las 18:47

Migrar proyecto de Angular 10 a Angular 11

La versión de Angular 11 nos trae las siguiente mejoras:


  • Automatic Inlining of Fonts
  • Component Test Harnesses
  • Improved Reporting and Logging
  • Updated Language Service Preview
  • Updated Hot Module Replacement (HMR) Support

    Añade el flat --hmr al ng serve y sólo se recargará el módulo que hayas modificado

  • Typescript v4 y Webpack 5
  • TSLint vs ESLint
  • Angular Community


Para pasar un proyecto de Angular 10 a la nueva versión Angular 11 sigue los siguientes pasos:

Paso 1; entra a la carpeta de tu proyecto desde la consola de comandos:

cd carpeta_mi_proyecto_angular

Paso 2; Haz una nueva rama antes de migrar a la nueva versión por si hubiera cualquier problema poder volver a la versión anterior:

git checkout -b goToAngular11

Paso 3; Actualizar Angular CLI y Core a la versión 11:

ng update @angular/cli @angular/core

En el caso de que uses Angular Material en tu proyecto deberás actualizarlo también, para ello:

Paso 4; Haz un commit del estado actual del proyecto

git add .
git commit -m 'goToMaterialUpdate'

Paso 5; Actualizar Material:

ng update @angular/material

Si deseas más información puedes consultar la documentación oficial donde podrás elegir la versión de Angular de partida y elegir a cúal quieres migrar.


Te recomiendo que no hagas más de un salto para evitarte dolores de cabeza y mucha pérdida de tiempo. Quiero decir, que si quieres migrar de la 8 a la 10, que primero hagas la migración de la 8 a la 9 y por último de la 9 a la 10


Bonus

Te recomiendo actualizar tu Angular CLI de manera global y así, cada vez que crees un nuevo proyecto lo hará 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

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2