Que hay de nuevo en Angular 5?

Angular es un framework de javascript que ha tenido una historia interesante y siendo que es uno de los frameworks que ha estado al aire mucho mas tiempo, creo que es bueno e importante que sepamos a que nos enfrentamos cuando actualizamos a Angular 5. A diferencia del salto de Angular 2 a Angular 5 el cual es 0% compatible, de Angular 4 a 5 hay seis meses de diferencia y algunos cambios que seguro romperán sus aplicaciones.

Por antigüedad Angular ha madurado de buena forma y se ha convertido en uno de los frameworks mas robustos de javascript que existen hoy en día, si la gente que escribe tantísimos frameworks de javascript se dedicara a mejorar los que ya existen, el mundo seria un lugar mejor.

Bueno sin mas preámbulos paso a la lista de cosas que vienen completamente nuevas en Angular 5

Typescript 2.4

Angular 5 ahora soporta TypeScript 2.4 de forma oficial, Sin embargo Angular ya soportaba TypeScript 2.3 sin errores de compilación desde su versión 4.3 incluyendo la opción de un Strict-Null-Check.

Algunos de los features mas importantes de esta ultima versión de TypeScript

Enums con valores string

Con anterioridad los Enums solo podían tener un valor numérico, esto se acabo en esta versión. Ahora es posible declarar sus Enums de la siguiente manera:

enum Colores {Rojo = "ROJO", Verde = "VERDE", Azul = "AZUL",}

Sin embargo no es posible obtener el valor string de un Enum de la misma forma que su contra parte numérica. Es decir Colores [“ROJO”]  simplemente no devolverá nada.

Aplicaciones Web Progresivas

Actualmente el desarrollo de aplicaciones web progresivas es un proceso muy complejo que necesita cuidado tanto durante su desarrollo como en su entrega de modo que todo sea compatible con lo anterior sin interferir con la cache de las aplicaciones en sus versiones mas viejas.

Con Angular 5 el desarrollo de aplicaciones web progresivas ha sido simplificado en tal medida que incluso pueden ser creadas por default. Los usuarios y los desarrolladores se beneficiaran de esta característica.

Haciendo uso de Angular-CLI se tiene la habilidad de crear una configuración propia. Esencialmente esto permite la creación de aplicaciones móviles  que tienen características de aplicaciones nativas, como la capacidad de seguir funcionando aun cuando se esta sin conexión, notificaciones emergentes e incluir el logo de la aplicación en la barra de menú de cualquier plataforma en particular.  Internamente, los conocidos service workers  son los que habilitan a la aplicación para trabajar sin conexión la mayor cantidad del tiempo ademas del manejo de las notificaciones.

Angular ahora provee service workers a través de su modulo @angular/service-worker. Otros elementos requeridos son la generación de un manifesto de cache para HTML5 y la creación de un shell para la aplicación. Considerando su estatus de conexión (offline/online) se hace necesario en rutar los eventos adentro o afuera de la aplicación.

Para activar el sporte de aplicaciones web progresivas, es necesario el siguiente comando:

ng set apps.0.serviceWorker=true

Reactive Forms

Cuando usamos Reactive Froms  la propiedad updateOn es pasada como parámetro al momento de instanciar FormControl.

Como ejemplo, aquí hay un FormControl con sus parámetros correspondientes.

this.email = new FormControl(null, { updateOn: 'blur' });

Si los validadores también se especifican, se hace pasando mas propiedades al constructor

this.email = new FormControl(null, {
  validators: Validators.required,
  updateOn: 'blur'
});

En lugar de especificar el comportamiento para cada uno de los elementos en el FormControl todo se hace a traves del objeto FormGroup y FormArray. 

Veamos un ejemplo de un FormControl que establece las validaciones de todos sus elementos hijos al momento de enviar el Form.

this.login = new FormGroup({
  email: new FormControl(),
  password: new FormControl()
}, { updateOn: 'submit' });

Template driven Forms

Para los forms que esta definidos a través de un template, el parametro updateOn  que fue introducido en Angular 5 tambien puede ser especificado en este contexto haciendo uso del atributo ngModelOptions como en el siguiente ejemplo:

<input type="email" ngModel [ngModelOptions]="{updateOn: 'submit'}">

Esto se puede hacer tanto en los elementos del form como en todo el form, de la siguiente forma:

<form [ngFormOptions]="{updateOn: 'submit'}">
   <input name="email" ngModel type="email">
   <input name="password" ngModel type="email">
</form>

Ademas, un elemento hijo puede sobre escribir el valor default de la misma forma como lo hacen los forms reactivos.

<form [ngFormOptions]="{updateOn: 'submit'}">
 <input name="email" ngModel type="email" [ngModelOptions]="{updateOn: 'blur'}">
 <input name="password" ngModel type="email">
</form>

Cliente HTTP

Igual que el cliente http introducido en Angular 4.3 pero esta vez soporta que pongamos headers y parámetros en el request, ahorrandonos una cantidad significativa de tiempo.

http.get("/cosa", {
    headers: {
        "X-DEMO-HEADER": "un-header-custom"
    },
    params: {
        "foo":  "bar"
    },
})

i18n

El manejo de la internacionalización en el nuevo angular se hace cargo de cosas como fechas, divisas y porcentajes que fueron afectados por cambios internos en el framework. Ahora la localización se hace basándose en la información contenida en los CLDR (Common Locale Data Repository)  conocida también en otros mundos como “resource bundles”.

Entonces si ahora queremos registrar un recurso de localización hacemos esto:

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
  
registerLocaleData(localeDe);

Y la esta localización se puede usar com usualmente lo haciamos.

@NgModule({
  // ...
  providers: [{provide: LOCALE_ID, useValue: 'de'}]
})
export class AppModule{}

Si el proyecto depende directamente de recursos existentes de localización se le puede decir explícitamente que utilice el viejo api de internacionalización como DeprecatedI18NPipesModule el cual estará ahí probablemente hasta la siguiente versión mayor.

import { NgModule } from '@angular/core';
import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';
  
@NgModule({
  imports: [
    CommonModule,
       // Import the deprecated module after the CommonModule
    DeprecatedI18NPipesModule
  ]
})
export class AppModule { }

Router

El router de angular ha sido extendido con eventos adicionales. Ahora por ejemplo, se pueden crear progress displays que muestran cuando una ruta ha cambiado. Los eventos correspondientes son:

• ActivationStart
• ActiavationEnd
• ChildActivationStart
• ChildActivationEnd

Como ejemplo digamos que queremos poner un spinner para cargar algo y subscribirse a ciertos eventos para mostrarlo o no:

router.events
    .filter(e => e instanceof RouteEvent)
    .subscribe(e => {
        if (e instanceof ActivationStart) {
            spinner.start();
        } else if (e instanceof ActivationEnd) {
            spinner.end()
        }
    });

Deprecaciones removidas

En angular 4 se marcaron varias cosas como deprecated y se quitaron en angular 5, estas son:

• OpaqueToken ahora se usa InjectionToken
• El parametro constructor de ErrorHandler ha sido removido
• ngOutletContext se remueve de NgTemplateOutlet
• initialNavigation ahora solo acepta enabled y disabled (nada mas deja de buscar…)
• el elemento ng-container se debe usar en lugar de comentarios i18n
• Ya no se usa enableLegacyTemplate por default
• En favor de usar @angular/common/http el modulo angluar/http se marca como deprecado
• La inyección de dependencias usando ReflectiveInjector se ha deprecado ahora usamos StaticInjector

Y de seguro hay muchos cambios más que se me pasan por alto, pero estos son los más importantes.

Si alguien quiere agregar algo a este post, puede hacerlo en los comentarios.

Saludos.