Angular est l’un des frameworks les mieux réputés et les plus utilisés par les développeurs de front-end. Avec la sortie d’Angular 7, nous avons constaté plusieurs améliorations qui ont principalement touché le Core du framework, Angular Materials, ainsi que la CLI. Dans cet article, nous allons illustrer l’ensemble de ses évolutions et nous allons présenter un guide sur la mise à niveau des projets qui ont été créés avec des versions antérieures.
I. Nouvelles fonctionnalités d’Angular 7
L’équipe d’Angular a investi beaucoup d’effort sur l’amélioration de la CLI. Dans les anciennes versions, lorsque vous exécutiez des commandes telles que ng new ou ng add, vous n’aviez pas le choix de faire des personnalisations (par exemple ignorer l’installation de certains modules.) Avec la nouvelle CLI, vous avez plus de flexibilité avec l’ensemble de ces commandes. L’exemple ci-dessous montre l’exécution de ng new qui offre la possibilité d’installer ou non le module de routing. La CLI permet également de choisir entre CSS, SCSS, SASS, etc. La bonne nouvelle ? Tout est personnalisable ! Il suffit simplement d’ajouter un fichier schematic.json dans lequel vous indiquez les étapes à exécuter.
Ces nouveautés ont également touché l’Angular CDK (Component Development Kit) avec l’intégration de deux nouveaux modules :
1. Virtual Scroll
Dans les dernières années, la plupart des applications web et mobiles se sont orientées vers le chargement dynamique du contenu tel que des fils d’actualités, des images, etc. Angular a facilité ces tâches aux développeurs en intégrant les fonctionnalités de virtual scroll qui gèrnt le chargement et le déchargement des listes et des éléments de façon fluide, sans influencer les performances. Lien vers la documentation officielle : https://material.angular.io/cdk/scrolling/overview
2. Drag and drop
Le module @angular\cdk\drag-drop offre une façon simple d’implémenter les fonctionnalités de drag and drop. Il permet de réaliser cette fonctionnalité aussi bien que le tri des listes. Le développeur a donc
la possibilité de customiser l’ensemble de ces features surtout au niveau des animations. Lien vers la documentation officielle du module : https://material.angular.io/cdk/drag-drop/overview
Parmi les nouvelles améliorations, on trouve également la mise à jour des dépendances. En effet, Angular 7 dépend de la version 3.1 de Typescript au lieu de 2.7. En plus la dernière version de RxJs 6.3.3 a été ajoutée ce qui offre un gain de performance, la facilité de débogage et l’amélioration de la modularité, tout en assurant la compatibilité avec les versions antérieures. Finalement la nouvelle version dépend de Node JS 10.
L’équipe d’Angular a aussi remarqué que les développeurs ont tendance à oublier le polyfill de reflect-metadata dans des environnements de production alors que celui-ci n’est nécessaire qu’en phase de développement. Afin de résoudre un tel problème, il sera automatiquement supprimé de votre polyfill.ts pour les builds de production.
Les nouveaux projets crées avec la nouvelle version vont notifier le développeur si la taille d’un bundle dépasse 2MB et générer une erreur si celui-ci dépasse 5MB. Ces limites sont ajustables à partir du fichier angular.json
II. Mise à niveau des anciennes versions
1. Mise à niveau de votre application
Pour la majorité des applications qui sont développées en utilisant une ancienne version d’Angular la mise à niveau de votre application nécessite l’exécution des commandes suivantes :
$ ng update @angular/cli @angular/core
Et si vous utilisez Angular Material, il suffit d’exécuter la commande suivante :
$ ng update @angular/material
2. Mise à niveau de votre CLI
Finalement, nous allons montrer la mise à niveau de votre CLI à la version 7. D’abord vous devez désinstaller l’ancienne version avec la commande.
$ npm uninstall -g angular-cli
La deuxième étape consiste à vider le cache comme suit :
$ npm cache clean
La dernière étape repose quant à elle sur l’installation de la version la plus récente :
$ npm install -g @angular/cli@latest
Il est généralement recommandé de consulter le guide de mise à niveau. Avant d’effectuer toute opération surtout au niveau des projets critiques :
https://update.angular.io/
Si vous avez des questions sur ce sujet, n’hésitez pas à nous laisser un commentaire en dessous de cet article !
