Angular 5, quoi de neuf ?

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.

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 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"
    ]
}

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

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);

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 => {} );

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',
    .
    .
    .
})

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

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.

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';

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);
            }
        });
    }
}

Vous pouvez retrouver plus de détails en anglais sur le blog d’Angular et aussi jeter un œil sur le changelog complet sur Github.