Angular 12 vient de sortir, comme j'ai passé un peu de temps à parcourir toutes les nouveautés de cette version, j'en profite pour faire un petit récapitulatif des plus gros changements 🧐

La fin du support IE en approche 🎉

C'est officiel : Angular ne va plus supporter Internet Explorer. À la version 12 le support est déprécié et à partir de la 13 totalement supprimé.

Si vous avez encore des projets qui supportent IE il va être temps de pousser vos utilisateurs à migrer vers un autre navigateur, ce qui sera pour le mieux pour vous comme pour eux.

Plus de lint, ni de e2e...

Dans les sorties, on trouvera aussi la fin du support de tslint et Protractor, ainsi que les commandes ng lint et ng e2e.

Protractor n'est plus en développement depuis quelque temps donc c'est assez logique de passer à autre chose. Des travaux sont en cours pour intégrer au CLI au choix Cypress, WebDriverIO ou TestCafe en remplacement.

Tslint est déprécié depuis 2019, il était temps de passer à autre chose là aussi. Toute la communauté se regroupant autour de ESlint, il faut suivre en faisant manuellement la configuration en attendant une proposition de l'équipe Angular.

Une compilation plus moderne

À partir d'Angular 12, on verra encore un peu plus se réduire la différence entre un build local et de production : tout est compilé en mode production par défaut.

Sous le capot le passage à WebPack 5 devrait améliorer les performances de compilation sans grand effort.

On notera aussi la possibilité de compiler en es2017 de sorte réduire la taille des bundles et avoir un code javascript généré plus moderne (et donc plus efficace).

Angular 12 met aussi quasiment totalement fin au moteur ViewEngine. En effet à partir de cette version tout sera compilé par défaut avec Ivy, y compris les librairies sur les nouveaux projets (il faut basculer manuellement sur les librairies déjà existantes). De cette manière les librairies seront compilées de façon plus optimisée permettant un meilleur confort pour les développeurs utilisant les librairies utilisant Ivy.

À noter que tous les projets seront maintenant compilés en mode strict par défaut, même sur les projets existants. On aura donc un peu plus de vérification de code à la compilation ce qui sera très bénéfique pour la maintenabilité !

Angular DevTools

En parallèle de l'annonce de la version 12 d'Angular, on a vu apparaître une nouvelle extension pour aider au débogage des applications Angular. Celle-ci est une extension Chrome uniquement, développé avec Rangle.io, ceux-là même qui développait Augury (qui fonctionnait de plus en plus mal au fil des versions et même plus du tout au passage à Ivy…).

Je suis dans l'attente d'une version pour Firefox, mais comme il s'agit d'une WebExtension, ça ne devrait pas demander trop d'effort. Pour suivre le sujet, une issue a déjà été ouverte demandant le support de Firefox : https://github.com/rangle/angular-devtools/issues/785

Malheureusement comme à partir d'Angular 12, le build est effectué en mode production par défaut, il faut faire manuellement un peu de configuration pour pouvoir utiliser l'extension qui ne fonctionne qu'en mode développement 😓. Sur une de mes applications j'ai ajouté à la commande ng serve l'option --optimization=false qui bien que dépréciée fonctionne toujours et m'a permis de rapidement tester Angular DevTools.

Passage à TypeScript 4.2

Angular 12 fait passer la version TypeScript à 4.2, ce qui offre toutes les nouveautés de TypeScript mais aussi un alignement avec la version minimale requise pour RxJS 7 qui est sorti récemment.

RxJS 7 n'est pas encore officiellement supporté par Angular, mais on trouve dans la note de version quelques indications autour de RxJS 7 qui approche pour les applications Angular, en particulier une mise à jour du AsyncPipe pour le rendre compatible.

J'ai donc tenté l'expérience de migrer un de mes projets vers RxJS 7 : aucun souci à signaler. Juste une petite note : si vous utilisez Angular Material (et donc @angular/cdk), vous devrez forcer l'installation de RxJS 7 si vous passez par ng update pour l'installer 😈.

Nullish coalescing operator dans les templates

De la même façon qu'on pouvait déjà le faire en TypeScript, on pourra maintenant utiliser le nullish coalescing operator dans les templates. Petit exemple plus parlant :

...
return foo?.bar ?? 'unknown text';
// before
// return foo?.bar ? foo?.bar : 'unknown text';
...

<span>{{ foo?.bar ?? 'unknown text' }}</span>
<!-- before 
<span>{{ foo?.bar ? foo?.bar : 'unknown text' }}</span>
-->

Ce n'est pas révolutionnaire comme apport, mais ça devrait simplifier quelques templates ! 😍

Conclusion

Comme souvent avec Angular, la plupart des changements se font sous le capot, au niveau du moteur ou du CLI, et tout est transparent.

Vous pouvez effectuer la migration sans soucis, au minimum faire une migration en local pour valider que rien ne casse chez vous 😎

Sources:

Crédit photo : https://pixabay.com/photos/mailbox-number-twelve-letter-boxes-1056324/