Angular 10 Novedades

¡Ajaaa! ¿Sabes cuales son las novedades de Angular 10? si supieras no estuvieras aquí jeje, bueno sin duda alguna es el mejor framework para front-end que existe en la actualidad. Google de verdad se puso a la tarea y sacó esta obra de arte desde mi punto de vista.

Bueno empecemos con lo interesante, suponiendo que sí estás leyendo este artículo ya conoces la ‘gerga’ con la cual me expreso.

Principales características

En esta versión la mayoría de los cambios están enfocados en el ecosistema y en hacer el framework más rápido y menos pesado a la hora de compilación.

  1. Uso estricto: si Angular de por si es estricto ahora lo es más, al momento de crear un proyecto podemos usar el ‘flag’ –strict así

    ng new <nombre del proyecto> --strict

    como sabemos en angular se programa sobre TypeScript un lenguaje de programación de código libre mantenido por Microsoft, y que una de sus caracteristicas es ser tipado, por ejemplo ahora que uses –strict en un proyecto no podrás usar el tipo de variable Any.

  2. Actualización del ecosistema: en esta versión el framework aprovecha y actualiza partes esenciales como lo es:
    • TypeScript bumped a TypeScript 3.9
    • TSLib a la versión 2.0
    • TSLint a la versión 6.0

  3. Differential loading está desactivado: básicamente lo que quiere decir es que Angular 10 solo va a compilar para navegadores modernos que corrar ES6 o también llamado ES2015, ¿ pero por qué ? pues ya te lo explicaré más adelante sigue leyendo. Así que sí necesitas usar esta característica deberás anexar la versión del navegador que quieres soportar en el archivo .browserlistrc para que se active nuevamente.

  4. Angular Language Service: detectar automáticamente que está abriendo un archivo Angular, leer su archivo tsconfig.json, encuentra todas las plantillas que tiene en su aplicación y luego proporciona servicios de idiomas para cualquier plantilla que abra está desabilitado para reducir costos de performance o rendimiento.

  5. CanLoad: Ahora los ‘guard’ o guardianes de la seguridad como me gusta llamarles pueden retornar Urltree, es decir lo que hace esta interface es verificar que todos los guards retornen ‘true’, de no se ser así cancela la navegación y redirecciona.

  6. Date range picker: si, por fin, gracias Dios, Angular Material incorpora un calendario de fechas, esto fue algo que se pidió mucho en las versiones anteriores. Para usarlo basta con

    mat-date-range-input
    mat-date-range-picker
Angular Material New Date Range Picker
https://miro.medium.com/max/820/0*cArB6i1vkamJ84sF


¿Cómo actualizo a Angular 10?

Según la documentación solo tiene que correr este hermoso comando

ng update @angular/cli @angular/core

Cosas que se rompen o Breaking changes

  • TypeScript 3.9: tienes que actualizar la versión de este lenguaje.
  • Los paquetes npm angulares ya no contienen comentarios jsdoc para admitir las optimizaciones avanzadas de Closure Compiler.
  • Si usabas modulos con providers sin tipear ahora es totalmente obligatorio.
'ModuleWithProviders<T>'
  • Los elementos <input> tipo númerico no soportarán el evento change.

Para más información sobre los Breaking changes entra aquí.

¡Gracias por leer este blog! nos vemos…

gracias GIF by Manuel Medrano