Quoi de neuf dans Angular v16 ?

Angular, maintenu par Google, est un framework open-source largement utilisé pour le développement d’applications web. Il vous offre une boîte à outils robuste et une gamme de fonctionnalités qui vous permettent de créer des applications web dynamiques, réactives et évolutives.

Le lancement récent de la version 16 d’Angular introduit des mises à jour et des améliorations passionnantes de l’expérience de développement, ainsi que de meilleures performances et une plus grande stabilité des applications.

1. Signaux Angular

Angular Signals est une bibliothèque qui permet de définir des valeurs réactives et d’établir des dépendances entre elles. Voici un exemple simple d’utilisation d’Angular Signals au sein d’une application Angular :

L’extrait de code ci-dessus crée une valeur calculée appelée fullName, qui s’appuie sur les signaux firstName et lastName. En outre, il définit un effet, une fonction de rappel qui s’exécute chaque fois que la valeur des signaux qu’elle lit change.

Dans ce cas, la valeur de fullName dépend de firstName et de lastName, de sorte que la modification de l’un ou l’autre déclenche l’effet. Lorsque la valeur de firstName est définie sur John, le navigateur enregistre le message suivant dans la console :

2. Standalone Ng New Collection

À partir d’Angular v16, vous pouvez créer de nouveaux projets autonomes dès le début ! Pour essayer l’aperçu développeur des schémas autonomes, assurez-vous que vous avez installé Angular CLI v16 et exécutez la commande suivante :

En faisant cela, vous obtiendrez une structure de projet plus simple sans aucun NgModules. En outre, tous les générateurs du projet produiront des directives, des composants et des tuyaux autonomes !

3. Mappage automatique des paramètres de l’itinéraire

Considérons une configuration de routage comme suit :

Avant Angular 16, il fallait injecter le service ActivatedRoute pour récupérer les paramètres d’URL, les paramètres de requête ou les données associées pour une URL particulière.

Voici un exemple de la façon dont vous deviez procéder :

Avec Angular 16, vous n’avez plus besoin d’injecter le service ActivatedRoute pour récupérer les différents paramètres de route car vous pouvez les lier directement aux entrées des composants.

Pour activer cette fonctionnalité dans une application qui utilise le système de modules, définissez la valeur correspondante dans les options de RouterModule :

Pour une application autonome, vous devez plutôt appeler une fonction :

Une fois cette fonctionnalité activée, le composant devient beaucoup plus simple :

4. Entrée requise

Une fonctionnalité très attendue par la communauté Angular est la possibilité de marquer certaines entrées comme obligatoires. Jusqu’à présent, vous deviez utiliser diverses solutions de contournement pour y parvenir, comme lever une erreur dans le cycle de vie NgOnInit si la variable n’était pas définie ou modifier le sélecteur du composant pour inclure les entrées obligatoires.

Cependant, ces deux solutions avaient leurs avantages et leurs inconvénients. À partir de la version 16, rendre une entrée obligatoire est aussi simple que de fournir un objet de configuration dans les métadonnées de l’annotation d’entrée :

5. Vite comme serveur de développement

Angular 14 a introduit un nouveau bundler JavaScript appelé EsBuild, qui a considérablement amélioré les temps de construction d’environ 40 %. Cependant, vous ne pouviez réaliser ce gain de performance que pendant la phase de construction et non pendant le développement avec le serveur dev.

Dans la prochaine version d’Angular, l’outil de construction Vite permet d’utiliser EsBuild pendant le développement également.

Pour activer cette fonctionnalité, mettez à jour la configuration du constructeur dans le fichier angular.json comme suit :

Veuillez noter que cette fonctionnalité est encore expérimentale.

Amélioration de l’expérience de développement et des performances

La version 16 d’Angular apporte des mises à jour passionnantes comme Angular Signals pour la gestion des données, la création de projets autonomes, le mappage automatique des paramètres de route, les entrées requises et l’intégration de Vite pour améliorer le développement. Ces améliorations améliorent l’expérience de développement et augmentent les performances de l’application.

S’abonner à notre newsletter