Angular 5, quoi de neuf ?

Après une sortie au mois de mars 2017 d’Angular 4,
il est déjà temps d’accueillir Angular 5.

Ecrit par Vivien

Après une sortie au mois de mars 2017 d’Angular 4, il est déjà temps d’accueillir Angular 5 en attendant Angular 6 prévu pour mars 2018. Pour ceux qui l’ignore, Angular c’est le nom d’un outil mis à disposition par Google qui sert à donner du bonheur aux développeurs d’application javascript. Du bonheur car l’outil est complet, la communauté nombreuse et qu’il nous permet de nous concentrer avec plaisir sur les problématiques client.

Parmi tous les changements, nous vous invitons à découvrir les plus significatifs.

Optimisation du build

A partir de la version 5.0.0, les builds de production créés avec Angular CLI appliqueront l’optimisation par défaut.

L’outil d’optimisation inclus dans Angular CLI a deux objectifs principaux. Le premier est d’améliorer le tree shaking (suppression des parties de l’application qui ne sont pas nécessaires). Le second est de supprimer les décorateurs Angular dont seul le compilateur a besoin.

Chacune de ces actions réduit la taille du build et accélère le démarrage des applications.

Angular Universal State Transfert API et DOM Support

Petit rappel, Angular Universal permet d’avoir un pré-rendu coté serveur des applications Angular, ce qui permet de prendre en compte les moteurs de recherche qui ne gèrent pas javascript.

Avec Angular 5.0.0, il est plus facile de partager des données entre la version serveur et la version client. Ce qui permet de ne pas effectuer d’appel HTTP en double pour récupérer des données lorsque la version client reprend la main.

L’équipe d’Angular Universal a aussi ajouté Domino à la platform-server ce qui fournit plus de manipulations du DOM en contexte serveur, améliorant ainsi le support des librairies tierces.

Amélioration du compilateur

  • Amélioration du build incrémental, ce qui permet d’accélérer les rebuilds notamment pour les builds de production et ceux avec AOT (Ahead-of-Time compilation).
  • Possibilité de supprimer les whitespaces, qui jusque là étaient conservés dans les templates. Il est possible de configurer ça soit au niveau du décorateur de chaque composant soit au niveau global via le fichier tsconfig.json. Le comportement par défaut est « true », mais il est envisagé que dans le futur ce soit « false ».

Au niveau composant :

@Component({
    templateUrl: 'about.component.html'
    preserveWhitespaces: false
})
export class AboutComponent {}

Dans le fichier tsconfig.json :

{
    "extends": "../tsconfig.json"
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "baseUrl": "./",
        "module": "es2015",
        "types": []
    },
    "angularCompilerOptions": {
        "preserveWhitespaces": false
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Nouveaux pipes pour les nombres, les dates et les devises

Ce qui permet un comportement plus homogène à travers les navigateurs et d’éliminer le besoin de polyfills pour l’i18n.

Remplacement du ReflectiveInjector par le StaticInjector

Là encore cela permet d’éliminer encore plus de polyfills, réduisant la taille des applications pour la plupart des développeurs.

Avant

ReflectiveInjector.resolveAndCreate(providers);

Après

Injector.create(providers);

Amélioration de la vitesse de Zone

Zone est plus rapide par défaut et il est maintenant possible de bypasser zone complètement pour les applications qui ont besoin de performances.

Pour bypasser zone, voici la marche à suivre :

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

exportAs

Nous pouvons à présent donner plusieurs noms à nos composants et directives, ce qui est très pratique en cas de renommage, cela évite de casser le code existant.

Cette possibilité a été utilisée dans le cas de changement de préfixe d’Angular Material.

Example :

@Component({
moduleId: module.id,
selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
exportAs: 'matButton, matAnchor',
.
.
.
})

HttpClient

Introduit en version 4.3 et très bien accueilli par les développeurs, il remplace l’ancien HttpModule.

Ajout d’updateOn Blur / Submit dans Angular Form

Il est maintenant possible de déclencher la validation des champs et l’update des valeurs sur l’évènement blur ou sur le submit d’un formulaire plutôt que sur chaque évènement lié à un input. C’est très utile en cas de validation côté serveur ou si des calculs coûteux sont déclenchés par la validation ou l’update des champs, cela permet de les lancer moins souvent.

RxJS 5.5

Pour être très bref, cette version améliore le système d’import.

Au lieu de :

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

On peut maintenant :

import { map, filter } from 'rxjs/operators';

Nouveaux événements pour le Router

Les nouveaux évènements peuvent être utilisés pour contrôler l’affichage d’un spinner ou pour mesurer les performances d’un resolver.

Voici un exemple d’utilisation pour démarrer et arrêter un spinner :

class MyComponent {  
    constructor(public router: Router, spinner: Spinner) {
        router.events.subscribe(e => {
            if (e instanceof ChildActivationStart) {
                spinner.start(e.route);
            } else if (e instanceof ChildActivationEnd) {
                spinner.end(e.route);
            }
        });
    }
}

Retour en haut
Consentement à l'utilisation de Cookies avec Real Cookie Banner