Angular 6 est disponible depuis le jeudi 03 mai 2018. On devrait dire simplement Angular (tout court), mais vous êtes comme moi et avez dû taper "Angular 6" dans les moteurs de recherche pour vous tenir au courant ces dernières semaines. Aussi, pour des raison de référencement vais-je utiliser l'expression Angular 6.
Pas de rupture
La rupture qu'il y a eu entre AngularJS et Angular a été profonde et a nécessité d'apprendre ni plus ni moins un tout nouveau framework. Les passages successifs d'Angular v2, v4, V5 et désormais v6 se font toujours aussi facilement.
Principale mise à jour : RxJS 6
RxJS est passé en v6 en avril 2018. Angular reposant énormément sur RxJS tant au niveau des Observables que des célèbres et nombreux opérateurs de RxJS (tels que map(), filter(), debounceTime() etc ...), les rares breaking changes viendront de là. Mais l'équipe de RxJS nous a facilité la tâche.
Mise à jour vers RxJS 6 à l'aide de rxjs-compat
Pour que vos applications Angular 5, qui utilisent RxJS 5.X, puissent facilement être mises à jour vers RxJS 6 (utilisé par Angular 6), la mise à jour la plus aisée consiste à installer le package rxjs-compat
npm i rxjs-compat
Ce package vous dispensera d'effectuer d'autres changements. Ce package n'augmentera que peu la taille du bundle de votre application Angular.
Mise à jour "manuelle" vers RxJS 6
Rien d'effrayant à cette alternative à rxjs-compat : il suffit de s'adapter à la nouvelle structure des packages de RxJS 6. La bonne nouvelle étant qu'il est désormais très simple de trouver les classes et opérateurs les plus courants, la demi douzaine de chemins possibles se résumant désormais à un seul.
Ainsi, l'import d'Observable ou de Subject s'effectue directement depuis 'rxjs' :
// avant RxJS 6
import { Observable } from 'rxjs/Observable';
// depuis RxJS 6
import { Observable } from 'rxjs';
La grande simplification concerne les opérateurs : ils sont désormais tous importés depuis 'rxjs/operators'. Prenons le cas du célèbre opérateur 'of', qui permet la création d'un Observable à partir d'un nombre quelconque d'arguments. Avant RxJS 6, il fallait l'importer depuis ''rxjs/add/observable'. Depuis RxJS 6, vous le trouvez dans 'rxjs/operators'
// avant RxJS 6
import 'rxjs/add/observable/of'
// depuis RxJS 6
import { of } from 'rxjs/operators';
Même chose pour le l'opérateur 'map'
// before
import 'rxjs/add/operator/map'
// after
import { map } from 'rxjs/operators';
Vous avez compris le principe.
Certains opérateurs ont dû être remplacés afin de ne pas empiéter sur des mots clés de JavaScript, tels que "catch", devenu "catchError" ou encore "throw" devenu "throwError". Leur importation devient donc :
import { catchError, throwError } from 'rxjs/operators';
Chaîner les opérateurs à l'aide de pipe()
La grande force des opérateurs est qu'ils font une seule chose bien et peuvent être chaînés afin d'effectuer des opérations complexes. C'est logique linuxienne demeure mais adopte là aussi une nouvelle syntaxe
// Avant (RxJS 5)
this.httpClient
.get(url)
.map(data => {
console.log(data);
return data.map(item => ({ name: item.name, age: item.age }));
})
.catch(error => {
return Observable.throw('oops');
})
.subsribe(data => {
this.users = data;
});
// après (RxJS 6)
this.httpClient
.get(url)
.pipe(
map(data => {
console.log(data);
return data.map(item => ({ name: item.name, age: item.age }));
}),
catchError(error => {
return throwError('oops');
})
)
.subsribe(data => {
this.users = data;
});
Voilà pour les changements introduits principalement par la nouvelle version de RxJS (RxJS 6). Vous pouvez retournez à vos développez ou lire la suite si vous souhaitez en apprendre davantage.
HttpClient plutôt que Http
Cette nouveauté n'en n'est plus une puisqu'elle date d'Angular 4.3 (juillet 2017), mais il est bon de rappeler qu'il est recommandé de s'habituer à utiliser HttpClient en lieu et place d'Http, le premier est importé depuis '@angular/common/http' tandis que le second, plus ancien, étant importé depuis '@angular/http'
// Avant Angular 4.3
import { Http } from '@angular/http'
// Depuis Angular 4.3
import { HttpClient } from '@angular/common/http'
Ivy : le nouveau renderer d'Angular
Si vous avez suivi ng-conf 2018, vous avez peut-être vu la démo qui permettait à l'aide d'Ivy d'obtenir un build de seulement 3 Ko, certes à partir d'une simple application de type "Hello World". Ivy est encore en cours de développement et ne doit pas encore - au moment au j'écris ces lignes - être utilisé en production. MVous pouvez suivre les avancées d'Ivy sur Ivy code size
Tout en 6
En assiste à une synchronisation des versions de packages Angular. Ainsi, @angular/core, @angular/common, @angular/compiler, etc ont tous la même version : 6.0.0.
Angular Elements
Si vous avez suivi ma formation dédiée aux Web Components, cette évolution ne vous fera pas peur, car vous savez déjà comment enrichir le HTML en créant de nouveaux composants natifs (les fameux Web Components). Avec Angular Elements, vous aurez l'occasion d'utiliser vos Web Components dans vos applications Angular 6. Dans les prochaines versions d'Angular en revanche, il sera possible de faire de vos composants Angular des Web Components utilisables dans des applications non-angular. Affaire à suivre.
Angular CLI 6 propose la nouvelle commande "ng update"
"ng update
Ce site web illustre l'utilisation de ng update en créant une checklist des packages à mettre à jour pour passer de votre version d'application à Angular 6
update.angular.io.
"ng update" va ainsi vous aider à mettre à jour les diverses dependances de vos projets. Epaulé par le workflow 'schematics', qui permet de créer des scripts de mise à jour, il devient possible pour des éditeurs de créer des scripts automatisant les mises à jour de packages. A noter que ng update ne remplace PAS votre package manager préféré (npm ou yarn).
Pour mettre à jour une application Angular (les packages ainsi que RxJS et TypeScript)
ng update @angular/core
Cette seule commande exécutera également les schematics fournis avec les packages Angular mis à jour. Ce qui inclut l'installation du package rxjs-compat qui permettra à votre code RxJS 5 de fonctionner une fois votre application migrée vers Angular 6.
Pour en savoir plus sur les schematics : schematics
Angular CLI 6 propose également la nouvelle commande "ng add"
"ng add " vous permet d'ajouter des fonctionnalités à votre application. Vous pouvez désormais utiliser ng add pour faire de votre application web Angular une PWA
ng add @angular/pwa
Cette commande ajoute manifest et service worker requis pour faire de votre application une PWA certes minimaliste, mais c'est un bon point de départ.
Pour ajouter ng-bootstrap ? De nouveau, une ligne de commande suffit
ng add @ng-bootstrap/schematics
Ajouter et installer Angular Material
ng add @angular/material
Vous avez compris le principe.
En résumé
Pas de changements notables pour les développeuses et développeurs avec cette v6 d'Angular. Comme toujours depuis Angular v2, les breaking changes sont minimes et cette fois, introduits essentiellement par les breaking changes introduits par l'excellente librairie RxJS dans sa nouvelle v6.
Les fondamentaux à comprendre sont et restent les mêmes depuis Angular v2 : Modules, Components, Services, Http, Input et Output decorators, RxJS, le routage, savoir intégrer une librairie externe.
L'amélioration des performances et la diminution de la taille des builds, l'amélioration des outils existants (tels qu'Angular CLI) et la création de nouveaux (comme schematics) ainsi que l'intégration de nouveaux standards du web (dont les Web Components) caractérisent cette nouvelle version d'Angular. Concernant ce dernier point, l'orientation prise est claire : permettre d'utiliser Angular au delà du seul contexte des SPA (Single Page Applications), c'est-à-dire permettre de créer des composants Angular qui seront utilisés comme des widgets dans d'autres applications, que ces applications soient des applications Angular ou pas.
Happy coding :)