Novedades y Actualización a Angular 10

Jul 2 2020

Angular se ha convertido en uno de los principales frameworks de Frontend de la actualidad, con las mejores cifras de empleabilidad para los desarrolladores web, actualmente con más de 1500 ofertas de trabajo en Linkedin, 437 en Infojobs y 204 en Tecnoempleo. El 25 de junio de 2020 se liberó oficialmente la versión 10 del framework y veremos en esta entrada las principales novedades y los cambios principales que requieren nuestros proyectos para adaptarse a esta nueva versión.

Principales Mejoras

Las principales mejoras las veremos que veremos a continuación:

• Nuevo Range DatePicker que permite la gestión de la introducción de dos fecha, típico para viajes o vuelos de ida y vuelta

• Se incluye un aviso de aquellas dependencias que se hayan empaquetado con CommonJS porque pesan mucho más, y para que te acuerdes de actualizar esas dependencias para evitar este peso extra.
• Modo Estricto: este modo se puede poner cuando creas el proyecto mediante el comando: ng new —strict
  • Usa el modo estricto en Typescript
  • Esto “impide” el uso de any para la definición de variables, mediante el linter
  • Las plantillas también se ponen en modo estricto
  • Se reducen los budgets de rendimiento en un 75%
  • Impide ciertos tipos de efectos colaterales al habilitar un tree shaking más avanzado.
  • Sólo recomendado para aquellos que ta tienen un nivel suficientemente alto en el manejo de Typescript y de los API’s que se usen
• Se ha introducido la integración con TypeScript 3.9, TSLib 2.0 y TSlint 6.0, también han metido un nuevo fichero de configuración tsconfig.base.json para mejorar las configuraciones de compilación para varios entornos.
• Se han reducido los navegadores soportados por defecto, para evitar cargar código compilado en es5 y reducir así los bundle de las aplicaciones, en más de 119MB al eliminar estas dependencias. En el caso de necesitar algún navegador más antiguo basta con incluirlo en el listado y meterá esas dependencias de nuevo. Entre lso navegadores que se eliminan está IE 9 y 10 (por fín).

• Se han eliminado más de 700 issues y se han tocado más de 2000, la idea es que vayan reduciendo en los próximos meses

Esta bien todo esto, pero ¿Cómo actualizo a Angular 10?

Como ya sabéis tenemos disponible una opción en ng que permite pasar el parámetro update. Como siempre, no olvides hacer un commit antes de tocar nada.

Convendrá realizar alguna actualización previa:

• Si usas el sistema de internacionalización de Angular 9 (i18n) ejecuta un ng update @angular/localize. Consulta la guía si es necesario.
• Si haceslazy loading, asegúrate que usas las importaciones dinámicas.

Partiendo de la versión 9.x.y del CLI podemos actualizar fácilmente nuestro proyecto, mediante el comando:

$ ng update

Este comando nos dará las opciones de actualización empezando por el CLI y siguiendo por el @angular/core y el resto de esquemas que estemos utilizando en el proyecto, primero actualizamos a la última versión de 9 de las herramientas:

$ ng update @angular/cli@9 @angular/core@9

Después ya podremos actualizar a la última versión de las dependencias:

$ ng update @angular/cli @angular/core

Tras la actualización deberíamos ver algunos cambios realizados por el actualizador automatizado.

Después de hacer estos cambios deberemos actualizar las dependencias de @angular/material

$ ng update @angular/material

Después comprueba si queda algo pendiente de actualizar ejecutando:

$ ng update

Comprueba el fichero .browserslistrc y revisa el tsconfig.base.json por si acaso.

¿Que hacer después de la actualización?

• No olvides repasar la guía de actualización por si hay algún cambio que debemos realizar debido a colocar algunas funcionalidades obsoletas.
• Si utilizas muchas bibliotecas de angular es posible que te interese incluir ngcc a tu proyecto para mejorar los tiempos de compilación.

Esta versión de Angular 10 la verdad es que promete mucho, veremos si las cosas que nos han contado se cumplen con hechos.