Ya tenemos aquí las novedades de Angular 6 y si no las has mirado ya… seguro que te mueres de ganas de saber qué nos trae esta nueva versión. Apunta:

Comando de actualización ng-update

La CLI de Angular 6 incorpora este nuevo comando que analiza tu package.json y te facilita la actualización de la app o alguno de sus paquetes. ng update te permite mantener actualizadas y sincronizadas las dependencias de tu proyecto.

Por ejemplo, el comando ng update @angular/core actualiza todos los paquetes del framework Angular, así como RxJS y TypeScript. Además, ejecuta los schematics de actualización de estos paquetes externos para actualizar a su vez sus dependencias. En este caso, por ejemplo, instalará automáticamente el paquete rxjs-compat en tu app para facilitar la adopción de RxJS v6.

Si estás pensando en actualizarte, dale un vistazo a la guía de actualización de Angular.

Comando de añadir dependencias ng-add

Se ha ampliado la funcionalidad del comando ng-add para que permita también instalar paquetes de dependencias. De este modo, ng-add <package> utiliza tu gestor de paquetes (npm/yarn/…) para descargar el paquete y sus dependencias, y de paso ejecutar su script de instalación (schematics) si existe.

Que las librerías incorporen un script schematics de instalación tiene cierta gracia. Por ejemplo, podrías:

  • Modificar la configuración del proyecto
  • Añadir dependencias adicionales
  • O incorporar código de inicialización

Aquí te traigo tres casos reales de lo que puedes hacer con esta función:

  • ng add @angular/pwa: Convierte tu web en una PWA y le añade el app manifest y el service worker.

  • ng add @angular/material: Instala y configura Angular Material, configura los themes e incorpora schematics de nuevos componentes para crearlos con el comando ng generate.

  • ng add @angular/elements Añade las dependencias de Angular Elements así como el polyfill que requieren (document-register-element.js).

Angular Elements

Angular Elements te permite generar Custom Elements (componentes estandar que entienden los navegadores modernos) a partir de componentes Angular. Esto es algo muy esperado y que llevaba un tiempo funcionando en beta.

Esta primera release facilita la carga de componentes Angular externos dentro de una app Angular ya existente, registrándolos como Custom Elements. Esto es útil, por ejemplo, para renderizar contenido dinámico con HTML generado mediante un CMS. A partir de ahora, no necesitarás inicializar manualmente esos componentes Angular que encuentras en el contenido html estático servido por tu CMS.

Angular Material y Material starters

A partir de ahora la nomenclatura de versión de Angular Material irá alineada con la del framework, es decir, ya podemos hablar de Angular Material v6.

Angular Material v6 trae consigo 4 nuevos componentes:

  • Tree: Permite mostrar contenido jerárquico.
  • Flexible Overlays: Permite gestionar el tamaño y posición independientemente del contenido. Por ejemplo, si tienes un menú muy largo, este elemento se preocupa de como encajarlo en pantalla.
  • Badge: Un componente nuevo para indicar notificaciones.
  • Bottom-Sheet: Componente tipo menu desplegable desde la parte inferior de la pantalla, típica de interacciones en entornos mobile.

Otra novedad destacable de Angular Material v6 son los starters que se han añadido mediante schematics:

  • Material Sidenav: Componente de inicio, responsive, que incluye una toolbar y un menu de navegación lateral. Puedes crearlo con el comando:
    ng generate @angular/material:material-nav --name=nombre-de-mi-comp
     
    El starter tiene la pinta que ves a continuación:
    material-nav

  • Material Dashboard: Componente de inicio, que incluye un grid dinámico de tarjetas. Puedes crearlo con el comando:
    ng generate @angular/material:material-dashboard --name=nombre-de-mi-comp
     
    Esta es su apariencia:
    material-dashboard

  • Material Data Table: Componente de inicio, tipo tabla de datos, preconfigurado con un datasource para paginación y reodenación. Puedes crearlo con el comando:
    ng generate @angular/material:material-table --name=nombre-de-mi-comp
     
    El componente queda así:
    material-table

Angular Component Dev Kit (CDK)

El Angular CDK te permite crear componentes con las ventajas funcionales de Angular Material pero sin heredar su dependencia visual (UI). Entre las funcionalidades que proporciona, hay:

  • Patrones de accesibilidad
  • Bidireccionalidad del texto (izquierda a derecha y viceversa)
  • Detección de cambios de layout
  • Detección de cambios de contenido
  • Detección de eventos de scroll
  • Facilidades de renderizado dinámico

Además, la CDK también proporciona funcionalidades de 3 componentes distintos (y se espera que vayan en aumento):

  • Stepper: Lógica del componente stepper de Angular Material, que te permite generar un flujo de interacción con el usuario.
  • Table: Componente base para crear una tabla de datos.
  • Tree: Componente base para mostrar un árbol de contenido jerárquico.

Nuevo archivo de configuración y CLI workspaces

El archivo de configuración del proyecto .angular-cli.json se ha renombrado a angular.json.

Además, ahora este archivo puede hacer referencia a varios proyectos, todos dentro del mismo espacio de trabajo. Cada workspace tiene proyectos, cada proyecto tiene targets y cada target puede tener distintas configuraciones.

Lo ideal es que lo mires con detenimiento en la documentación, pero aquí tienes un ejemplo sencillo de archivo angular.json.

{
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}

Soporte de la CLI a librerías

Con Angular 6 puedes crear librerías directamente desde la CLI.
Solo tienes que usar el siguiente comando: ng generate library <name>.

El comando anterior crea el esqueleto de la librería, preparada para compilar y testear. Para más detalles, échale un vistazo a la Wiki de Angular.

Providers tree-shakable

Hasta ahora, declarabas los providers o bien en el NgModule, o bien en un componente concreto. A partir de ahora ya no tienes que declararlos en ningún lado. Solo tienes que especificar en qué nivel hay que introducir el provider desde el propio decorador Provider. De este modo los servicios solo se incluirán en los módulos que realmente lo necesiten, reduciendo el tamaño del bundle de la aplicación.

Te pongo un ejemplo.

Antes

//-----app.module.ts-------
@NgModule({
    //...some stuff...
    providers: [MyService]
})
export class AppModule {}
//-------------------------


//-----some-service.ts-------
import { Injectable } from '@angular/core';

@Injectable()
export class SomeService {
    constructor() { }
}
//-------------------------

Ahora

// some-service.ts
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class MyService {
    constructor() { }
}

Como ves, ya no hay que tocar el NgModule raíz para inyectar ahí el servicio.
Puedes mirar en la documentación de DI como resolver casos más complejos.

Mejor rendimiento en animaciones

Angular animations ya no necesita usar el pollyfill web animations js, lo que te permite ahorrar 47KB en el bundle y mejorar el rendimiento en Safari.

RxJS v6

Angular siempre ha ido muy ligado a RxJS, aunque son proyectos independientes. Al incorporar esta nueva versión (la más reciente de RxJS), se añaden algunos major changes que podrían romper tu código. Para evitarlo, Angular dispone del paquete rxjs-compat que logra hacer tu código retrocompatible.

Entre las novedades de RxJS, tienes una mayor reducción del bundle final, gracias a mejoras para hacerlo más tree-shakable

Puedes leer todos los cambios en la guía de migración de RxJS 5.5 a 6.0.

Long Term Support (LTS)

Desde Angular habían dicho que las versiones v4 y v6 serían LTS, es decir, tendrían un soporte de 18 meses. Ahora han cambiado el chip y han decidido que todas las versiones (empezando en la v4) van a ser LTS.

Reflexiones personales

Estoy muy contento de que no haya grandes «breaking changes».

Veo una fuerte apuesta por la CLI de Angular y una explotación incremental de sus schematics, y me gusta que empujen con fuerza Angular Material y el CDK.

Además, es destacable el esfuerzo que están haciendo para reducir el tamaño del bundle. Como punto negativo, me habría gustado ver ya en producción el famoso Ivy compiler en el que están trabajando y que promete no tener que precuparte nunca más por el tamaño del bundle. Parece que tendré que esperar, al menos, a la próxima Release.

En cualquier caso, lo que más destacaría es la iniciativa Angular Elements, que tiene muy buena pinta.
Espero escribir pronto un post sobre este tema. Mientras tanto, voy a ver si actualizo alguno de mis proyectos a Angular v6. ¿Y tú, te animas?

Si te ha gustado este artículo, compártelo 😉