Angular 13 est sorti la semaine dernière, je vous fais un petit résumé de ce que je retiens de cette nouvelle version !

Fin du support de IE ! 🎉🎉

Cette fois c'est le clap de fin pour Angular sur IE ! C'était annoncé depuis quelques temps déjà, mais Angular CLI et Angular ne fera plus aucun effort de support pour IE et tous les éléments permettant de faire un support simple d'IE disparait avec cette version.

En conséquence une amélioration de l'expérience développeur grâce à la suppression du differential build (le second build permettant d'avoir une version de notre application compatible IE), beaucoup moins de polyfill embarqués, et la possibilité pour l'équipe Angular d'améliorer la chaîne de compilation en se débarrassant d'éléments historiques !

À noter que si vous devez encore supporter IE, la version 12 d'Angular sera supportée jusqu'en novembre 2022.

Ivy everywhere !

La sortie de ViewEngine continue de se faire. Pour cette nouvelle version, l'ensemble des modules Angular sera compilé en utilisant le nouveau mode de compilation "partielle".

Concrètement ça veut dire qu'il n'y a plus besoin de lancer une première compilation avec ngcc pour avoir ensuite un build plus rapide, on a déjà des modules au format de sortie de ngcc, donc le démarrage en mode développement est beaucoup plus rapide qu'avant !

Ce changement est accompagné de l'arrivée du cache Angular (.angular/cache) de sorte à accélérer les temps de compilation là encore. Pour vider ce cache au besoin, il suffit de supprimer le dossier de cache.

Note : au moment de migrer en version 13, faite attention à bien avoir dans votre .gitignore une ligne "/.angular/cache", chez moi Angular CLI n'a pas ajouté cette ligne.

Tester plus vite !

Introduite en opt-in en version 12.1, la version 13 active par défaut le nouveau teardown du TestBed. Ce changement corrige un petit souci d'injection de style (le style des composants n'était pas déchargé à la fin de l'exécution d'une suite de test) qui ralentissait très fortement l'exécution des tests unitaires utilisant TestBed.

Normalement, ça ne fait aucune différence pratique à part un gain de performance.

Template toujours plus strict

Pas mal de changement sont en cours pour améliorer le typage en Angular.

On avait déjà depuis quelque temps l'option "fullTemplateTypeCheck". Il faut maintenant la remplacer par "strictTemplates" car plus strict. Sur mon petit projet, j'ai déjà eu quelques erreurs de remontées.

Formulaires plus strict

En préparation de la version 14, les propriétés AbstractControl.status et AbstractControl.statusChanges ont été retypés. On passe donc d'un status string à FormControlStatus et d'un statusChanges en Observable<any> à Observable<FormControlStatus>

Le but de ces changements est de préparer le terrain pour l'arriver du typage complet des formulaires en version 14.

Petite sucre dans les templates

À partir d'Angular 12.1, si vous avez des cas de passage d'objet du type <button (click)="setName({ name: name })">Set name</button>, vous pouvez maintenant écrire simplement <button (click)="setName({ name })">Set name</button>, comme on le ferait dans du code javascript/typescript classique.

Suppression des bindings préfixés

Jusque-là on avait le choix quand on faisait du bind d'utiliser les syntaxes courtes avec des parenthèses pour les évènements ((click)) et des crochets pour les passages de propriétés ([input]), mais on pouvait aussi écrire on-click ou bind-input. Ces syntaxes sont maintenant dépréciées (et seront donc supprimés dans les versions à venir je pense).

Je pense que peu de gens utilisait encore ces syntaxes, mais on doit encore en trouver, en particulier sur des projets migrés depuis AngularJS.

Conclusion

L'amélioration du type checking dans les templates peut poser quelques soucis sur cette montée de version. Je vous recommande de quand même prendre le temps de faire le tour des erreurs pour les corriger, histoire d'avoir un filet de sécurité toujours plus grand ! 😇

Sinon quelques améliorations de performance toujours bienvenue ! 😎

Sources :

Crédit photo : https://pixabay.com/photos/house-number-13-house-number-13-3143265/