Angular 12

Angular 12, la dernière version majeure du framework de développement web, est désormais disponible. En tant que passionné du développement logiciel, j'ai pris le temps d'explorer en détail toutes les nouveautés apportées par cette version. Dans cet article, je vous propose un récapitulatif concis des changements les plus significatifs introduits par Angular 12. Découvrez les améliorations et les fonctionnalités qui rendront vos projets web encore plus performants et efficaces. Suivez le guide pour rester à la pointe de la technologie ! 🚀

La fin du support IE en approche

Une nouvelle importante pour les développeurs web : Angular a pris la décision officielle de ne plus supporter Internet Explorer. À partir de la version 12, le support d'IE est désormais déprécié, et il sera complètement supprimé à partir de la version 13

Si vous avez encore des projets qui dépendent d'Internet Explorer, il est grand temps d'encourager vos utilisateurs à migrer vers d'autres navigateurs modernes. Cette transition sera bénéfique à la fois pour vous en termes de développement et de compatibilité, ainsi que pour vos utilisateurs qui profiteront d'une expérience web améliorée et plus sécurisée. Préparez-vous à ce changement et restez à l'avant-garde des technologies web en adoptant les meilleures pratiques de développement.

Plus de lint, ni de e2e...

Parmi les annonces importantes, notons la fin du support de tslint et de Protractor, ainsi que des commandes ng lint et ng e2e.

Il est compréhensible que Protractor ne soit plus en développement depuis un certain temps, ce qui justifie de chercher des alternatives. Des travaux sont actuellement en cours pour intégrer dans le CLI les choix entre Cypress, WebDriverIO ou TestCafe en remplacement.

Quant à tslint, il est déprécié depuis 2019, et il était temps de passer à autre chose. Étant donné que toute la communauté se rallie autour de ESlint, il est conseillé de suivre cette tendance en effectuant la configuration manuellement en attendant une proposition officielle de l'équipe Angular. Restez à jour avec les outils de linting recommandés pour garantir la qualité de votre code et faciliter la collaboration au sein de la communauté de développement web.

Une compilation plus moderne

Avec l'arrivée d'Angular 12, la distinction entre un build local et un build de production se réduit davantage : désormais, tout est compilé en mode production par défaut. Cette évolution offre des performances de compilation améliorées grâce à la transition vers Webpack 5, sans nécessiter d'efforts considérables de votre part.

Une autre amélioration notable est la possibilité de compiler en es2017, ce qui permet de réduire la taille des bundles et de générer un code JavaScript plus moderne et plus efficace. Cette optimisation contribue à une expérience de développement plus fluide et à des performances accrues.

Angular 12 marque également la quasi-cessation du moteur ViewEngine. À partir de cette version, la compilation par défaut se fait entièrement avec Ivy, y compris pour les nouvelles bibliothèques (vous devrez effectuer manuellement la transition pour les bibliothèques existantes). Cette approche de compilation optimisée améliore le confort des développeurs travaillant avec les bibliothèques utilisant Ivy.

Il est important de souligner que tous les projets, y compris les projets existants, seront désormais compilés en mode strict par défaut. Cette augmentation des vérifications de code lors de la compilation présente des avantages significatifs en termes de maintenabilité et de qualité du code.

Angular DevTools

En parallèle de l'annonce de la version 12 d'Angular, une nouvelle extension dédiée au débogage des applications Angular a vu le jour. Cette extension, développée en collaboration avec Rangle.io, est actuellement disponible uniquement pour Chrome. Elle succède à Augury, qui avait connu des problèmes de compatibilité croissants avec les versions ultérieures et avait finalement cessé de fonctionner avec la transition vers Ivy.

J'attends avec impatience une version pour Firefox, sachant que la nature de cette extension en tant que WebExtension ne devrait pas poser de difficultés majeures. Une issue a déjà été ouverte sur GitHub pour demander le support de Firefox : lien de l'issue.

Malheureusement, à partir d'Angular 12, le build est automatiquement effectué en mode production, ce qui nécessite une configuration manuelle pour pouvoir utiliser l'extension qui ne fonctionne qu'en mode développement. Sur l'une de mes applications, j'ai ajouté l'option --optimization=false à la commande ng serve, bien qu'elle soit dépréciée, ce qui m'a permis de tester rapidement Angular DevTools.

Passage à TypeScript 4.2

Avec la sortie d'Angular 12, la version de TypeScript passe à 4.2, offrant ainsi toutes les nouveautés de TypeScript et assurant également une compatibilité avec la version minimale requise de RxJS 7, qui vient de sortir récemment.

Bien que RxJS 7 ne soit pas encore officiellement pris en charge par Angular, on trouve quelques indications dans les notes de version suggérant son approche pour les applications Angular. Une mise à jour de l'AsyncPipe est notamment prévue pour assurer sa compatibilité.

J'ai donc décidé de tenter l'expérience en migrant l'un de mes projets vers RxJS 7, et je suis ravi de constater qu'aucun problème majeur n'est à signaler. Toutefois, veuillez noter que si vous utilisez Angular Material (et donc @angular/cdk), vous devrez forcer l'installation de RxJS 7 si vous effectuez la mise à jour via la commande ng update.

Nullish coalescing operator dans les templates

Tout comme il était possible de le faire en TypeScript, il est désormais possible d'utiliser l'opérateur de coalescence nulle (nullish coalescing operator) dans les templates d'Angular. Voici un exemple concret :

...
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>
-->

Cet ajout n'est peut-être pas révolutionnaire en soi, mais il devrait simplifier certains templates !

Conclusion

Comme c'est souvent le cas avec Angular, la majorité des changements se produisent en interne, au niveau du moteur et du CLI, et tout se déroule de manière transparente.

Vous pouvez effectuer la migration en toute confiance, ou du moins procéder à une migration locale pour vérifier qu'aucun problème ne survient dans votre cas spécifique. Il est toujours préférable de prendre des précautions et de s'assurer que tout fonctionne correctement avant de passer à une nouvelle version.