Les nouveautés d’Angular 7.1

La dernière déclinaison du framework Angular est sortie le mois dernier et nous avons déjà pu constater certains retours auprès de nos amis développeurs. Il semblerait que la version 7.1 permette d’obtenir un code de meilleure qualité et supporte mieux le langage visuel et interactif Material Design de Google. La mise à jour reste mineure car l’équipe Angular est toujours principalement concentrée sur le projet Ivy pour réécrire le compiler Angular et rendre l’exécution du code plus simple et plus rapide.

On note cependant d’agréables nouveautés, comme la possible injection de dépendances (particulièrement utile pour rassembler des services de données pour les applications ou pour utiliser un modèle HTML dans l’élaboration de composants). Tour d’horizon des nouveautés du framework Angular 7.1.

Une nouvelle signature pour les Guards

Le routeur d’Angular permet l’activation et la désactivation des routes d’une application avec le concept de Guards. Si une route possède une Guard, elle est interrogée à chaque fois que la route est demandée et il est possible de vérifier si un utilisateur est autorisé à naviguer sur une URL spécifique. La plupart des guards utilisées avec Angular étaient jusqu’ici des variations du code suivant :

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {   const loggedIn = this.userService.isLoggedIn();   if (!loggedIn) {     this.router.navigateByUrl('/');   }   return loggedIn; }

Avec Angular 7.1, le code peut être grandement simplifié. Il est maintenant possible d’écrire :

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {   return this.userService.isLoggedIn() || this.router.parseUrl('/login'); }

La signature CanActivate peut désormais renvoyer : Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree

au lieu de :

Observable<boolean>|Promise<boolean>|boolean.

Alors qu’auparavant, il aurait fallu renvoyer une boolean, il est désormais possible de renvoyer l’URL vers laquelle nous souhaitons rediriger l’utilisateur.

La différence est également que désormais, le routeur se comportera correctement si plusieurs Guards déclenchent différentes redirections (ce qui n’était pas le cas auparavant, et pouvait induire des redirections avec des comportements non déterministes).

Nouvelle option pour runGuardAndResolvers

Le moteur d'Angular 7.1 ajoute un mode pathParamsChange à runGuardsAndResolvers. Par conséquent, les Guards et les Resolvers ignorent les changements apportés aux paramètres optionnels comme les requêtes et les paramètres de matrice. Même si le chemin ou les paramètres changent, les Guards et les Resolvers s'exécutent.

L’updateOn de FormBuilder

L’option updateOn option est disponible depuis Angular 5, mais n’était utilisable qu’à condition d’utiliser directement le constructeur FormGroup :

this.userForm = new FormGroup({   username: '',   password: '' }, {   validators: Validators.required,   updateOn: 'blur' });
Il est maintenant possible de l’utiliser via FormBuilder :
this.userForm = fb.group({   username: '',   password: '' }, {   validators: Validators.required,   updateOn: 'blur' });

Service Worker

Il est désormais possible d’être notifié lorsqu’un utilisateur clique sur une notification push, grâce à la notificationClicksobservable du service SwPush.

Bazel et Ivy 

L’équipe Angular planche actuellement sur un support pour Bazel et Ivy dans la version Angular 8. Certains packages ont déjà été lancés avec Angular 7.1, comme @angular/bazel, mais ne sont pas encore entièrement documentés.

Le bazel – workspace permet déjà de construire, tester et lancer les tests e2e avec Protractor, mais reste assez expérimental. Nous pouvons espérer dans un futur proche pouvoir générer directement une application CLI avec Bazel.

Pour avoir la liste complète des mises à jour, rendez-vous sur le changelog !

Développeur Angular? Découvrez vite l'ensemble de nos offres d'emploi à la recherche d'un nouveau challenge !