Après la sortie d’Angular 13 en novembre 2021, la version 14 d’Angular est maintenant disponible ! Au programme de cette nouvelle version, une complétion automatique CLI, des formulaires typés, des composants autonomes, des directives, des canaux, un diagnostic de modèle amélioré et pleins d’autres nouveautés !
Nous proposons une formation complète de cinq jours sur Angular et Angular Avancé ! Une formation qui vous permettra de découvrir toutes les fonctionnalités du framework, de la conception au développement d’une nouvelle application en passant par l’explication de ses mécanismes avancés. Une formation idéale pour ceux qui souhaitent apprendre à créer vos propres composants réutilisables, à tester complètement son application et à augmenter les performances de votre application Angular !
L’équipe d’AMBIENT IT
Comment mettre à jour ma version d’Angular ?
Pour installer Angular 14, il suffit d’ouvrir une nouvelle interface de ligne de commande et d’exécuter la commande suivante :
ng update @angular/cli @angular/core
Pour mettre à jour vers la prochaine version bêta ou préversion, utilisez l’ –next option.
Pour passer d’une version majeure à une autre, utilisez le format ng update :
@angular/cli@^major_version @angular/core@^major_version
Les nouveautés en détail
Cette version majeure est sortie au mois de juin 2022. Une version d’actualités sur Github et très attendue par ses utilisateurs, notamment grâce à la résolution d’un des principaux problèmes d’Angular, les formes dactylographiées.
des Formes typées
Angular 14 permet enfin d’avoir des formulaires strictement typés. Cette fonctionnalité, une fois implémentée, améliorera l’approche basée sur le modèle d’Angular pour travailler avec les formulaires.
Le FormControl accepte désormais un type générique qui indique une certaine valeur portée. De plus, une migration automatique a été ajouté dans la v14 pour garantir que les applications dominantes ne seront pas cassées lors de la mise à niveau. La complexité de l’API est vérifiée régulièrement, de sorte que les modifications doivent être gérées en douceur et que l’écosystème ne doit pas être divisé. De plus, les dernières mises à jour n’affecteront pas les formulaires basés sur des modèles.
FormControl prend dorénavant un type générique indiquant le type de la valeur qu’il détient. Pour s’assurer que rien ne casse dans les applications existantes, l’équipe Angular a publié une migration automatique dans Angular v14.
De plus, lors de la mise à jour vers Angular v14, une migration remplacera automatiquement toutes les entités de formulaire de votre application par leurs versions non typées :
FormControl → UntypedFormControl
FormGroup → UntypedFormGroup
FormArray → UntypedFormArray
FormBuilder → UntypedFormBuilder
Cette migration sera exécutée lors du lancement :
ng update @angular/core
Ou à la demande, si vous avez déjà mis à jour manuellement votre application :
ng update @angular/core --migrate-only=migration-v14-typed-forms
À la fin de la migration, tous les imports et instances sont remplacés par leurs versions non typées. Et cela peut représenter beaucoup de fichiers dans les grandes applications
Suite à cela, l’application devrait maintenant fonctionner exactement comme avant.
Des composants autonomes
Les composants autonomes Angular servent à rationaliser la création d’applications Angular en réduisant le besoin de NgModules. Grâce à l’actualisation d’Angular, les modules sont désormais classés comme des composants optionnels et autonomes, cela permet d’avoir les composants autonomes en aperçu développeur. Ils sont prêts à être utilisés dans vos applications pour l’exploration et le développement, mais ne constituent pas une API stable et changeront potentiellement en dehors de notre modèle typique de rétrocompatibilité.
Pour rendre les NgModules facultatifs, Angular a publié une demande de commentaires sur les composants autonomes, que l’on appelle RFC (Request for Comments). Afin de maintenir la compatibilité avec l’écosystème actuel de bibliothèques et d’applications basées sur Angular, les modules ne seront pas entièrement supprimés dans la dernière mise à jour, ils deviendront plutôt facultatifs. Dans les versions précédentes d’Angular, chaque composant nécessitait une association de module. Par conséquent, chacun des composants doivent être présents dans le tableau de déclarations d’un module parent. Sinon, cela entraînera un échec de l’application.
Cependant, le but d’Angular est de s’éloigner de l’état actuel des choses en créant des artefacts tels que des tuyaux, des composants et des directives, l’objectif principal du framework Angular basé sur TypeScript.
Afin de maintenir la compatibilité avec l’écosystème actuel de bibliothèques et d’applications basées sur Angular, les modules ne seront pas complètement retirés ; au lieu de cela, ils deviendront facultatifs.
diagnostics de modèle améliorés
Dans Angular 13 et les versions précédentes d’Angular, aucun avertissement n’était généré par le compilateur en cas de problème. Angular 14 propose des diagnostics de modèles améliorés pour protéger les développeurs des erreurs de base en faisant correspondre le compilateur au code tapuscrit.
Des avertissements peuvent être facilement développés pour des problèmes de base, comme une syntaxe de liaison bidirectionnelle incorrecte ou l’utilisation d’opérateurs inutiles lorsque la variable n’accepte pas la valeur Null. De plus, les tests de diagnostic sont autorisés avec l’expansion d’un nouveau compilateur privé qui donnerait certains avertissements ou diagnostics d’informations pour les modèles d’utilisateurs qui ne sont pas précisément mortels.
L’ajout d’une nouvelle option de compilateur privé permettrait des tests de diagnostic qui fourniraient des avertissements ou des diagnostics d’informations pour les modèles utilisateur qui ne sont pas strictement létaux.
Complétion automatique de la CLI angulaire
Si votre jeu Angular CLI est puissant, vous pouvez déterminer comment améliorer la productivité en fournissant les commandes nécessaires pour créer des artefacts tels que des composants, des modules et des directives pour votre projet. Cependant, il existe de nombreuses commandes à disposition, mais vous devez souvent consulter le guide officiel pour examiner les commandes et les options de commande.
Avec le lancement d’Angular 14, cela n’est plus nécessaire, elle fournit la dernière fonctionnalité de la CLI, permettant la saisie automatique en temps réel dans le terminal.
Au départ, vous devez exécuter la commande de complétion ng dans votre terminal. Après cela, il vous suffit de taper la commande ng, puis d’appuyer sur Tab pour rechercher toutes les options possibles pour vous, et sur Entrée pour opter pour l’une d’entre elles. De plus, si vous travaillez sur le projet Angular 14, plus d’options d’autocomplétion, comme les options de commande ng create, sont disponibles. La première fois, vous devez exécuter la commande de complétion ng dans votre terminal.
Accessibilité simplifiée du titre de la page
Le titre de votre page affiche différemment le contenu de votre page lorsque vous développez des applications. Dans Angular 13, l’ensemble du processus d’ajout de titres a été rationalisé avec la nouvelle propriété Route.title dans le routeur Angular. Angular 14 n’a plus besoin d’importations supplémentaires lorsque le titre est ajouté à votre page.
Dernières primitives dans le CDK angulaire
Le CDK angulaire, c’est-à-dire le kit de développement de composants, offre un ensemble détaillé d’outils pour développer des composants angulaires. Désormais, la boîte de dialogue et le menu CDK ont été poussés vers une version stable dans Angular 14. Cependant, les nouvelles primitives CDK permettent de créer des composants personnalisés plus accessibles.
Angular DevTools est maintenant présent en ligne
Vous pouvez également utiliser l’extension de débogage Angular DevTools en mode hors ligne. L’extension est présente dans les modules complémentaires de Mozilla pour les utilisateurs de Firefox.
Injecteurs en option
À présent, vous pouvez mentionner un injecteur facultatif via ViewContainerRef.createEmbeddedView et TemplateRef.createEmbeddedView lors du développement d’une vue d’intégration dans Angular v14.
Améliorations intégrées
Angular 14 soutient TypeScript 4.7 ciblant également ES2020 par défaut. Il permet à la CLI de déployer du code sans le dévaluer. C’est une fonctionnalité significative d’Angular 14 qui aide à créer un lien vers des membres de composants protégés directement à partir des modèles. Vous obtenez plus de contrôle sur la surface de l’API publique des composants réutilisables.
Diagnostics de développeur étendus
Cette fonctionnalité d’Angular v14 fournit un cadre extensible, un changement considérable qui vous aidera à comprendre vos modèles et propose des suggestions pour des améliorations potentielles.
Conclusion
En résumé, les innovations sur Angular permettent une réelle facilité d’utilisation, notamment grâce au lancement de composants autonomes. Ses nouvelles fonctionnalités garantissent aux développeurs d’être protégés contre une variété d’erreur, mais aussi d’obtenir de meilleures versions du framework basé sur TypeScript tout en restant à jour avec l’autre écosystème en ligne et les besoins des utilisateurs.
Vous pouvez découvrir les nouveautés apportées par Angular 15 ici.
