Vous êtes peut-être au courant, Angular 5 est sorti le 1er Novembre 2017 ! Concrètement, cela signifie qu’il est maintenant temps de voir ce que cette nouvelle version du Framework propose, et si nous pouvons en profiter dans nos applications. Allez, au boulot…

La version précédente était la version ~4.4.x, et l’équipe en charge du développement d’Angular a décidé qu’il était temps de passer à la vitesse supérieure, littéralement. En effet, l’objectif principal de cette mise à jour est de rendre Angular plus rapide.

Dans cet article nous allons passer en revue les 12 principaux changements apportés par la version 5 d’Angular. Mais avant, nous allons voir comment vous pouvez déjà mettre à jour votre application grâce à outil très pratique que Google nous propose.

Remarque : Saviez-vous que les plateformes comme Google AdWords ou Adsense utilisent Angular pour construire leur interface ?

Mettre à jour son application pour Angular 5

Alors, bonne nouvelle, l’équipe d’Angular ne nous a pas laissé seul pour mettre à jour nos applications ! Elle a même construit un outil vraiment génial pour rendre la mise à niveau aussi facile que possible.

Utiliser l’outil de mise à jour

Le fonctionnement de cet outil est simple :

  1. Vous entrez la version actuelle de votre application;
  2. Vous entrez la version vers laquelle vous souhaitez adapter votre application. Dans notre cas il s’agira de la version 5;
  3. Ensuite, vous suivez les instructions recommandées par l’outil.
ng.X-to-ng5
L’outil proposé par Google pour mettre à jour vos applications.

Exemple de l’adaptation de mon tutoriel, stabilisé pour la version 4.3

Dans le cas de mon cours sur Angular, je dois le mettre à jour pour Angular 5. Mais diable comment s’y prendre ? Je pensai passer des jours à relire tout le contenu du cours, revoir tel ou tel chapitre en fonction des dernières nouveautés, etc. En gros, une galère ! Mais grâce à l’outil présenté ci-dessus, la mise à jour va pouvoir être fait rapidement. L’outil m’informe que je dois suivre quatre étapes pour mettre à jour mon cours :

  1. Renommer mes balises template en ng-template. Comme il n’y pas de balises de ce type dans mon tutoriel, je n’ai rien à faire sur cette étape ! 😛
  2. Il ne faut plus utiliser le module HttpModule et le service Http, mais le module HttpClientModule et le service Http. Je vais donc devoir mettre à jour le chapitre sur Http, tant pis ! L’application m’informe que le service HttpClient simplifie le traitement des requêtes, et que je n’aurais plus besoin d’appeler la fonction map pour extraire le json de la réponse. Ce nouveau service prend également en charge les valeurs de retour typées et les intercepteurs.
  3. Apparemment, il y a quelques changements au niveau de certains pipes natifs, concernant l’internationalisation. Le cours n’est donc pas concerné par ces changements, ouf ! On peut passer à l’étape suivante.
  4. Pour terminer, il faut mettre à jour toutes les dépendances vers la dernière version d’Angular, et la bonne version de TypeScript. L’application nous facilite la tâche en nous donnant directement les commandes à appliquer:

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2' --save

npm install typescript@2.4.2 --save-exact

Remarque : Angular 5 nécessite donc d’installer au moins la version 2.4.2 de TypeScript.

J’ai pris la liberté d’ajouter l’option –save à la première commande, pour mettre directement à jour le fichier de déclaration des dépendances package.json.

Bilan, je vais devoir modifier une partie du chapitre « Hello, world » de mon cours pour être à jour avec ces nouvelles dépendances, ainsi que mettre à jour le chapitre « Http » pour utiliser le nouveau module HttpClientModule. Mais je m’en sors plutôt bien, seulement deux chapitres à réécrire !

Bref, je n’ai plus qu’à suivre ces instructions pour mettre mon cours à jour. Et pour votre application, je vous invite à suivre la même procédure, en fonction de la version actuelle que vous utilisez. Pratique non ? 😀

Pour les plus téméraires, vous retrouverai ci-dessous les principaux changements apporté par cette nouvelle version d’Angular.

Les 12 travaux … de Angular 5

Voici une liste des changements qu’apporte Angular 5, résumé en 12 points.

Il est nécessaire d’avoir de bonnes connaissances sur Angular (animations, angular universal, etc.) pour profiter pleinement de ces explications, sinon vous pouvez simplement utiliser l’outil ci-dessus qui suffira dans de nombreux cas.

12-travaux-hercule
Les 12 travaux … d’Angular 5 !

1. Le module HttpClient remplace (définitivement) Http

Avant la version d’Angular 4.3, c’est le module @angular/http qui était utilisé pour gérer les requêtes Http. Mais dans la version 5, l’équipe en charge d’Angular a décidé de déprécié le module Http. A la place, c’est le service HttpClient, du package @angular/common/http (apparut dans la version 4.3) qui est maintenant recommandé.

Les fonctionnalités de HttpClient diffèrent de Http. Voici un post sur Stackoverflow qui résume très bien la différence entre ces deux modules. Quant à l’importation de ces modules, elles sont aussi différentes.

Le Http (avant) :

import { HttpModule } from '@angular/http';

Et le HttpClient (après) :

import { HttpClientModule } from '@angular/common/http';

2. Le support pour plusieurs alias d’exportation

Dans Angular 5, vous pouvez maintenant donner plusieurs noms à vos composants et directives lors de l’exportation. L’exportation d’un composant avec plusieurs noms peut vous aider à maintenir votre code plus facilement. Si vous devez changer les noms de vos composants par exemple, et bien vous pourrez toujours utiliser l’ancien nom dans le reste de l’application.

Bon, pratique, mais pas indispensable, on est d’accord.

Exemple d’utilisation :


import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 exportAs:'dashboard, logBoard' // on ajoute plusieurs noms
})
export class AppComponent {
  title = 'app';
}

3. Les pipes number, date et currency sont internationalisés

Angular 5 dispose de nouveaux pipes : number, date et currency. Ils améliorent la standardisation entre les navigateurs, et élimine le besoin des polyfills pour i18n. Les pipes dépendent du CLDR (Unicode Common Locale Data Repository, rien que ça !) pour s’adapter en fonction de la langue que vous souhaitez prendre en charge.

Remarque : Si, pour une raison obscure, vous souhaitez utilisez les anciens Pipes, c’est encore possible. Vous devrez importer le DeprecatedI18NPipesModule après le CommonModule :

  import { NgModule } from '@angular/core';
  import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';

  @NgModule({
    imports: [
      CommonModule,
      // import deprecated module after
      DeprecatedI18NPipesModule
    ]
  })
  export class AppModule { }

4. Support des décorateurs améliorés !

Angular 5 supporte l’utilisation des expressions lambdas (ou fonction fléchées), à la place des fonctions nommées, notamment pour définir la valeur de useValue, useFactory et data.

Avec Angular 5

  @Component({
    provider: [{provide: 'token', useFactory: () => null}]
  })
  export class AwesomeClass {}

Avant Angular 5

  @Component({
    provider: [{provide: 'token', useValue: calculated()}]
  })
  export class AwesomeClass {}

5. Optimisation du processus de build

L’équipe Angular s’est concentré principalement à rendre Angular 5 plus rapide, plus léger et plus facile à utiliser. Dans Angular 5, les builds de production crée avec Angular CLI appliquent désormais le build optimizer par défaut.

Le build optimizer supprime les décorateurs Angular des codes d’exécution de votre application, réduisant ainsi la taille de votre build, et augmentant la vitesse de démarrage de votre application.

De plus, le build optimizer supprime une partie de votre application qui n’est pas nécessaire lors de l’exécution. Cette action entraîne une réduction de la taille du build et une vitesse d’application plus rapide. Bref, on prend ! 😀

6. Une API Transfer pour Angular Universal

Si vous n’utilisez pas Angular Universal pour le moment, comme moi, passez directement au point suivant. Cependant, pour les autres, voici ce que vous devez retenir :

  • L’équipe de Angular Universal a ajouté Domino à la platform-server. Cela signifie simplement qu’il y a plus de manipulations du DOM qui peuvent se produire en dehors des contextes côté serveur.
  • En outre, deux modules, ServerTransferStateModule et BrowserTransferModule ont été ajoutés à Angular Universal. Ces modules vous permettent de générer des informations dans le cadre de votre rendu avec platform-server, puis de les transférer vers le client pour éviter la génération de la même information. En résumé, il transfère l’état du serveur, ce qui signifie que les développeurs n’ont pas besoin d’effectuer une seconde requête HTTP une fois que l’application a accédé au client.

7. Une compilation beaucoup plus rapide !

De nombreuses améliorations ont été apportées au compilateur Angular pour améliorer sa rapidité. Le compilateur Angular profite maintenant des transformations de TypeScript. Les transformations TypeScript sont une nouvelle fonctionnalité introduite dans TypeScript 2.3, qui permet de se connecter au pipeline de compilation standard de TypeScript. C’est un peu technique, mais retenez que ça va plus vite. 🙂

Vous pouvez en profiter en exécutant :

ng serve --aot

La documentation officielle angular.io elle-même a été utilisée comme étude de cas, et le pipeline du compilateur a permis d’économiser 95% du temps de build !

Concrètement, on passe de 1 minutes de build, à 2-3 secondes. On est d’accord, Angular 5 propose des avancées plutôt solides.

8. La validation des formulaires dans Angular 5

Dans Angular 5, les formulaires ont désormais la possibilité de décider quand la validité et la valeur d’un champ ou d’un formulaire seront mises à jour, via blur ou submit. Cela permet d’affiner l’ancien comportement qui se déclenché à chaque événement d’entrée.

Exemple pour un champ

<input name="nickName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

Exemple pour un formulaire

<form [ngFormOptions]="{updateOn: 'submit'}">

Dans le cas des Reactive forms, on peut ajouter l’option comme ceci, côté composant :

ngOnInit() {
  this.newUserForm = this.fb.group({
    userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
  });
}

9. Les animations avec Angular 5

Dans Angular 5, nous avons désormais deux nouveaux alias de transition. Il s’agit de :increment et :decrement.

...
animations: [
  trigger('bannerAnimation', [
   transition(":increment", group([
     query(':enter', [
       style({ left: '100%' }),
       animate('0.5s ease-out', style('*'))
     ]),
     query(':leave', [
       animate('0.5s ease-out', style({ left: '-100%' }))
     ])
   ])),
   transition(":decrement", group([
     query(':enter', [
       style({ left: '-100%' }),
       animate('0.5s ease-out', style('*'))
     ]),
     query(':leave', [
       animate('0.5s ease-out', style({ left: '100%' }))
     ])
   ])),
 ])
]

Les requêtes d’animation prennent désormais en charge les limites négatives, auquel cas les éléments sont appariés depuis la fin, plutôt que depuis le début, comme ceci:

... animations: [ trigger( 'myAnimation', [ transition( '* => go', [ query( '.item', [ style({opacity: 0}), animate('1s', style({opacity: 1})), ], {limit: -3}), ]), ]), ] ...

Enfin, si vous n’avez pas encore vu les animations avec Angular, cela doit pas vous parler beaucoup. 🙂

(Dans ce cas, utilisez l’outil que je présente au début du chapitre, ce sera plus simple et plus rapide.)

10. Les nouveaux événements de cycle de vie du Router

Certains nouveaux événements de cycle de vie ont été ajoutés au routeur. Voici la liste complète de ces événements :

  • GuardsCheckStart
  • ChildActivationStart
  • ActivationStart
  • GuardsCheckEnd
  • ResolveStart
  • ResolveEnd
  • ActivationEnd
  • ChildActivationEnd

Avec ces événements, les développeurs peuvent suivre le cycle du routeur depuis le début des Guards en cours, jusqu’à la fin de l’activation.

De plus, vous pouvez désormais configurer le routeur pour recharger une page, même lorsqu’il reçoit une requête pour naviguer vers une URL identique :

providers: [
  // ...
  RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload'
  })
]

11. Meilleur support des Service Workers

Dans Angular 5, nous avons un meilleur support pour les services workers via le packet @angular/service-worker.

Le package de service worker est un dérivé conceptuel du package @angular/service-worker qui a été conservé sur : github.com/angular/mobile-toolkit. Mais il a été réécrit pour prendre en charge des cas d’utilisation sur une plus grande variété d’applications.

Remarque : Pour le moment, vous devez intégrer manuellement ce package, car il n’est pas pleinement intégré avec Angular CLI v1.5. Il est disponible en bêta dans la version 1.6 du CLI.

12. Déprécations, et mises à jour diverses…

  • NgFor a été retiré et est déprécié depuis la version 4. Utilisez NgForOf à la place. Dans tous les cas, cela n’a aucune incidence sur l’utilisation de *ngFor dans vos templates.
  • L’option du compilateur enableLegacyTemplate est maintenant désactivée par défaut, car la balise template était obsolète depuis la version 4. Utilisez ng-template à la place. L’option enableLegacyTemplate et l’ancienne balise seront tous deux supprimés dans Angular 6. Simple anticipation ! 🙂
  • La méthode ngGetSelectors a été retirée et dépréciée depuis la version 4. Utilisez ComponentFactory.ngContentSelectors à la place.
  • ReflectiveInjector est maintenant déprécié. Utilisez Injector.create en remplacement.
  • NgProbeToken est maintenant retiré du @angular/platform-browser et est déprécié depuis la version 4. Importez le depuis @angular/core à la place.

Conclusion

J’espère que ce modeste article vous aura donné envie de mettre à jour votre application, et ce sans prise de tête.

Pour savoir, êtes-vous déjà passé à Angular 5 ? Avez-vous remarqué une amélioration significative? Faites-le moi savoir dans les commentaires !

Et pour terminer, voici un lien vers les derniers correctifs d’Angular, mis à jour très régulièrement par l’équipe Angular elle-même ! 😎

Resources

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s