!Angular 9 está aquí!

Feb 7, 2020 · 5 minutes read · [Angular] [Web Development]

Más ligero, rápido, simple y compatible hacia atrás

La versión 9.0.0 de Angular finalmente ha visto la luz. Este lanzamiento se convierte en algo muy importante para el ecosistema Angular, ya que abarca toda la plataforma, incluyendo el framework, Angular Material y Angular CLI. Esta versión hace uso de Angular Ivy por defecto e introduce mecanismos mejorados para probar componentes.

El lanzamiento de esta nueva versión se convierte en una de las actualizaciones más importantes en los últimos 3 años.

Angular 9 ya está aquí

¿Cómo Actualizar a la versión 9?

Para tener una mejor experiencia, se recomienda actualizar primero a Angular 8.

ng update @angular/cli@8 @angular/core@8

Luego, actualiza a la versión 9

ng update @angular/cli @angular/core

Visita update.angular.io para encontrar información detallada sobre el proceso de actualización.

Angular Ivy

La versión 9 mueve todas las aplicaciones para usar el motor de compilación-ejecución denominado “Ivy”. Este motor reemplaza el anteriormente conocido como “View Engine”.

Este cambio es transparente para los desarrolladores y además ofrece numerosas ventajas:

  • Tamaños en los bundles más reducidos
  • Pruebas más rápidas
  • Mejor mecanismo de depuración(debugging)
  • Un mejorado binding CSS por class y style
  • Validación de tipos mejorada
  • Errores en compilación mejorados
  • Tiempos de compilación mejorados, que habilitan AOT(Ahead of Time) por defecto
  • Internacionalización mejorada

Otras mejoras en la versión 9

El equipo Angular también ha estado trabajando para mejorar la experiencia completa de desarrollo.

Actualizaciones más confiables

Se han realizado cambios en el funcionamiento deng update para que sea más confiable e informativo.

  • Usa siempre la última versión de CLI. Empezando con la versión 8.3.19 de Angular CLI, ahora usa el CLI de la versión de actualización TARGET durante el proceso de actualización. Esto significa que las actualizaciones serán manejadas por la última versión de CLI automáticamente.
  • Progreso de actualización más claro. ng update ahora hace más para decirte lo que sucede en el fondo.
  • Depuración de actualizaciones más simple. De forma predeterminada, ng update ejecuta todas las migraciones y deja los cambios adicionales visibles en disco, para que puedas revisarlos. Con la versión 9 también se introduce el parámetro --create-commits . Cuando ejecutas ng update --create-commits , la herramienta confirma el estado del código después de cada migración, para que se pueda entender o depurar cada uno de los cambios que se están produciendo en tu código.

Nuevas opciones para 'providedIn'

Cuando creas un servicio como @Injectable en Angular, se debe elegir dónde agregar al inyector. Además de las opciones actuales root y módulo, se tienen las siguientes:

  • platform — Especificando provideIn: 'platform' hace que el servicio esté disponible en un inyector de plataforma singleton, el cual es compartido por todas las aplicaciones en la página.
  • any — Provee una instancia única en cada módulo(incluyendo en módulos diferidos, lazy modules) que inyectan el token.

Vea más información sobre provideIn en la documentación oficial.

Nuevos componentes

Ahora se pueden agregar el soporte de YouTube y Google Maps en tus aplicaciones.

Componente YouTube

Ahora es posible renderizar un reproductor de YouTube en línea dentro de tu aplicación con el nuevo youtube-player.

Para agregar este componente, debes instalarlo:

npm install @angular/youtube-player

Este componente provee un componente wrapper que simplifica el uso de YouTube player API.

import {NgModule} from '@angular/core';
import {YouTubePlayerModule} from '@angular/youtube-player';

@NgModule({
  imports: [
    YouTubePlayerModule,
  ],
  declarations: [YoutubePlayerExample],
})
export class YoutubePlayerExampleModule {
}

@Component({
  template: '<youtube-player videoId="PRQCAL_RMVo" />',
  selector: 'youtube-player-example',
})
class YoutubePlayerExample implements OnInit {
  ngOnInit() {
    const tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    document.body.appendChild(tag);
  }
}

Ejemplo de uso de youtube-player en Angular

Componente Google Maps

También se presentan componentes google-maps, los cuales tienen por objeto facilitar la renderización de mapas, marcadores, y conectar la interactividad como si fuera un componente Angular convencional, lo cual evita tener que aprender el API de Google Maps.

Este nuevo componente implementa el denominado Maps JavaScript API

Para agregar este soporte, debes instalar:

npm install @angular/google-maps

De esta forma, podremos renderizar un mapa con unas cuantas líneas de código

<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="addMarker($event)"
            (mapMousemove)="move($event)"
            (mapRightclick)="removeLastMarker()">
  <map-marker #marker
              *ngFor="let markerPosition of markerPositions"
              [position]="markerPosition"
              [options]="markerOptions"
              (mapClick)="openInfoWindow(marker)"></map-marker>
  <map-info-window>Info Window content</map-info-window>
</google-map>

Ejemplo de código HTML para renderizar un mapa con Google Maps y Angular

IDE y mejoras con language service

Se han realizado mejoras significativas en la extensión Angular language service(disponible en el Visual Studio Marketplace). Junto con una importante revisión de arquitectura para abordar problemas de rendimiento y estabilidad, también se han solucionado errores.

Soporte de TypeScript 3.7

Angular se ha actualizado para que use TypeScript 3.6 y 3.7, incluyendo el extremadamente popular optional chaining de TypeScript 3.7

let x = foo?.bar.baz();

Que llega a ser una versión más legible y simplificada del siguiente código:

let x = (foo === null || foo === undefined) ? undefined : foo.bar.baz();

También se han actualizado las versiones para otras dependencias del ecosistema, como Zone.JS y RxJS.

Agradecimientos

El lanzamiento de la versión estable de Angular 9 supone la culminación exitosa demás de 2 años de trabajo. Las posibilidades que ofrecen estos cambios llenan de entusiasmo a la comunidad y no habría sido posible sin el aporte de cientos de personas que forman parte de la misma, además de un equipo increíble que lidera el rumbo de nuestro framework favorito.

Para conocer más sobre el lanzamiento de esta nueva versión, puedes visitar la historia el blog oficial de Angular.

Nota. Este post es una traducción parcial del post “https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3” escrito por Stephen Fluin, miembro del Equipo Angular.
Si te gustaron las novedades en torno a Angular 9, conoce al equipo que contribuye con su desarrollo y síguelos en sus redes.

Si te gustó el post, compártelo con tus amigos.

Puedes seguirme en Twitter y GitHub para conocer más de mi trabajo.

¡Gracias por leer!
— Luis Aviles

tweet Share