Ventajas de migrar de Angular 7 a versión 9 y versión 10

Angular versión 9

Angular es uno de los frameworks de código abierto líderes en el mercado para el desarrollo de aplicaciones, tanto web como móvil, el equipo de angular nos tiene acostumbrados a una versión mayor cada 6 meses.

Conoceremos la actualización de las técnicas mejoradas en Angular 9, que son:

• Nuevo compilador Ivy.
• Mejoras en el compilador y Angular CLI
• Mejoras de rendimiento general y a nivel interno del framework gracias a Ivy.
• Las aplicaciones de ahora pesan menos, mejor compresión y son más rápidas en general (mejorado con Ivy).
• Mejoras en el debugging y en los errores de compilación, ahora es más fácil identificar errores y fallos en el código.
• Mejoras de rendimiento en el binding de clases y estilo.
• Mejoras en la internacionalización.
• Mejoras para la migración de proyectos hechos con versiones anteriores de Angular.
• No hay cambios de sintaxis relevantes.

Guía de actualización angular 7.0 a 9.0 para aplicaciones básicas.

Antes de actualizar:

·  Si usa el legado HttpModule y el HttpService, cambie a HttpClientModule y el HttpClientService.

Durante la actualización:

·    Actualice a la versión 8 del marco principal y CLI ejecutándose ng update @angular/cli@8 @angular/core@8 en su terminal, revise y confirme los cambios.

·        Asegúrese de estar utilizando Node 10 o posterior.

·     Si usa ViewChild o ContentChild, estamos actualizando la forma en que resolvemos estas consultas para que los desarrolladores tengan más control. Ahora debe especificar que la detección de cambios debe ejecutarse antes de que se establezcan los resultados. Ejemplo: @ContentChild('foo', {static: false}) foo !: ElementRef;. ng update actualizará sus consultas automáticamente, pero se equivocará al hacer sus consultas static de compatibilidad.

·    Actualice Angular Material a la versión 8 ejecutando ng update @angular/material@8 en su terminal.

· En lugar de importar desde @angular/material, debe importar profundamente desde el componente específico. Ej @angular/material/button. ng update hará esto automáticamente por usted.

·   Ejecutar ng update @angular/core@8 @angular/cli@8 en el directorio de espacio de trabajo para la actualización a la última versión 8.x de @angular/core y @angular/cli y confirmar estos cambios.

·        Ejecute ng update @angular/core@9 @angular/cli@9 que debería llevarlo a la versión 9 de Angular.

·        Corre ng update @angular/material@9

·       Si su proyecto depende de otras bibliotecas de Angular, le recomendamos que considere actualizar a su última versión. En algunos casos, esta actualización puede ser necesaria para resolver incompatibilidades de API. Consulte ng update o npm outdated para obtener información sobre sus bibliotecas obsoletas.

Después de la actualización:

·    Si depende de muchas bibliotecas Angular, puede considerar acelerar su compilación invocando el ngcc (Compilador de compatibilidad angular) en un postinstall script npm mediante un pequeño cambio en su package.json.

·    Angular 9 introdujo una $localize() función global que debe cargarse si depende de la internacionalización de Angular (i18n). Ejecutar ng add @angular/localize para agregar los paquetes necesarios y las modificaciones de código.

Angular versión 10

Esta nueva versión no representa un gran cambio con respecto a la versión anterior, Angular 9, es decir, todo el código que tengamos hecho con Angular 9 es totalmente compatible con la versión 10, no hay cambios de sintaxis, por lo cual la migración de una versión a otra es muy fácil y no tendremos ningún tipo de problema.

Novedades

• Nuevo diseño de rango de fechas en Angular Material
• Nueva alerta con dependencias Common.JS: Cuando se cuenta con paquetes grandes y lentas que comprometan la performance de la aplicación la nueva versión de angular 10 añade una alerta en la compilación.
• El performance de paquetes predeterminados se han reducido en 75%.
• Eliminación de paquetes y discontinuaciones.
• Corrección de bugs.
• Se ha reducido la cantidad de navegadores compatibles con angular.

Instalación

Paso 1. Instalar NodeJS en su última versión, para eso entramos a su web oficial y descargaremos el instalador más actualizado https://nodejs.org/es/

Paso 2. Actualizar NPM, el gestor de paquetes de node, para bajarnos las dependencias más actuales:

npm install -g 
npm@latest

Paso 3. Borrar la caché de NPM:

npm cache clean --force

Paso 4. Desactivar las auditorias de NPM para evitar fallos:

npm set audit false

Paso 5. Desinstalar los paquetes anteriores de Angular CLI

npm uninstall -g angular-cli

Paso 6. Borrar la caché de NPM de nuevo:

npm cache clean --force

Paso 7. Instalar la última versión de Angular CLI para instalar Angular 10:

npm install -g @angular/cli@latest