Sélectionner une page

Angular 12 est disponible depuis le 13 mai 2021 est fait un énorme bond en avant en terme de nouveauté. Je vous propose dans cette article de faire le tour de toutes ces nouvelles pépites 🙂

Un pas de plus vers Ivy

Angular à décidé de déprécié son ancien moteur View Engine ce qui annonce une suppression de celle-ci dans une prochaine version majeure.

Les bibliothèques actuelles utilisant View Engine fonctionneront toujours avec les applications Ivy (aucun travail n’est requis de la part des développeurs), mais les auteurs de bibliothèques doivent commencer à planifier la transition vers Ivy.

Graph showing how Ivy improves app size
source: https://blog.angular.io/

Transition à partir des identifiants de messages i18n existants

Actuellement, le système i18n utilise plusieurs formats d’identifiants de messages hérités. Ces identifiants sont fragiles car des problèmes peuvent survenir en raison des espaces, des modèles de formatage et des expressions ICU.

Pour résoudre ce problème, Angular décide de changer de format d’identifiant de message. Celui ci est beaucoup plus résistant et intuitif. Ce format réduira l’invalidation inutile des traductions et le coût de re-traduction associé dans les applications où les traductions ne correspondent pas en raison de modifications d’espace blanc, par exemple

Depuis Angular 11, les nouveaux projets sont automatiquement configurés pour utiliser les nouveaux identifiants de message et Angular mets à disposition des outils permettant la migration de vos traductions existantes.

Le future des tests e2e sur Angular

L’équipe d’Angular a décidé de travailler avec la communauté pour déterminer le meilleur avenir pour la réalisation des tests end-to-end et à récolté les feedback de ses utilisateurs, disponible ici. Angular a choisi de ne pas inclure Protractor à l’avenir et, à la place, de proposer des options avec des solutions tierces populaires tels que Cypress, WebdriverIO et TestCafe afin d’aider les utilisateurs à adopter les solutions alternatives. Plus d’informations sont à venir au fur et à mesure de l’évolution et de l’analyse du RFC.

La vérification des valeurs null ou undefined

L’opérateur de vérification des valeurs null ou undefined ( ??) aide les développeurs à écrire du code plus propre dans les classes TypeScript depuis un certain temps déjà. Grace à Angular 12 il est désormais possible d’utiliser cette opérateur directement dans les templates html.

Par exemple :

{{age !== null && age !== undefined ? age : calculateAge() }}

Deviens :

{{ age ?? calculateAge() }}

Amélioration sur l’implémentation du style

À partir de la Angular 12, les composants Angular prendront désormais en charge Sass inline dans le champ styles du décorateur @Component. Auparavant, faire du sass était possible seulement en utilisant un fichier .scss externes en raison du compilateur Angular.

Pour activer cette fonctionnalité dans vos applications existantes, ajoutez « inlineStyleLanguage » : « scss » à angular.json.La configuration sera mis par défaut pour les nouveaux projets utilisant SCSS.

Support de IE11 déprécié

Angular est une plateforme évolutive, ce qui signifie qu’elle reste en phase avec l’évolution de l’écosystème web. La suppression de la prise en charge des anciens navigateurs permet de concentrer les efforts sur la fourniture de solutions modernes et d’avoir un meilleur support aux développeurs et aux utilisateurs.
Angular va donc commencer à inclure un nouveau message d’avertissement de dépréciation dans Angular 12 – et supprimer la prise en charge d’IE11 dans Angular 13.

Vous pouvez consulter la justification de cette décision en vous rendant sur le RFC.