Angular 14 apporte tellement

Angular 14 a quelque chose pour tout le monde. Plongeons-nous dans cette mise à jour communautaire !

Angular a fait monter la version d’un cran (en réalité, c’est plus qu’un « cran »), et c’est super excitant ! L’équipe Angular a ajouté plusieurs nouvelles fonctionnalités pour rendre l’expérience Angular plus intéressante pour tous les membres de la communauté, des composants autonomes aux injecteurs pour la vue intégrée et tout le reste.

L’équipe Angular souligne que, comme d’habitude, la plupart des mises à jour de base résultent des demandes de commentaires (RFC) et des commentaires de la communauté. Dans cet article, nous parlerons de ces nouveaux bébés Angular 14.

Composants autonomes désormais disponibles en version préliminaire

Les composants autonomes angulaires sont conçus pour faciliter l’apprentissage et l’utilisation d’Angular, car ils réduisent le passe-partout dans de nombreuses applications, en particulier celles qui utilisent déjà des modèles architecturaux. Désormais, avec les composants autonomes, vous pouvez importer directement dans votre composant sans NgModule.

Les API pour des fonctions telles que le démarrage d’une application ou le chargement paresseux de composants peuvent désormais s’intégrer à des composants autonomes sans avoir besoin du NgModule. La suppression du NgModule facilite le parcours d’apprentissage pour un débutant en Angular.

Les composants autonomes permettent également l’utilisation d’API plus rationalisées. Mais même si les composants autonomes de la v14 sont dans votre aperçu de développeur et sont configurés pour être utilisés pour l’exploration, ils ne sont pas encore une API stable et changeront en dehors du modèle angulaire de compatibilité descendante. L’équipe, cependant, prévoit d’utiliser l’open source pour fournir une API autonome en tant qu’API stable.

L’équipe Angular a également promis de construire des schémas (comme le ng new <app-name> -- -- standalone) et documenter les cas d’utilisation de ce nouveau modèle. Vous pouvez explorer une nouvelle Application de démonstration Stackblitz pour apprendre à créer une application angulaire à l’aide de composants autonomes.

Formes angulaires typées

Issu de la blog officiel angulaire

Numéro 13721 a été le plus populaire dans le référentiel Angular, car les types forts du package Forms ont été l’une des principales demandes de fonctionnalités. Angular v14, cependant, résout ce problème majeur de GitHub en implémentant des formulaires réactifs strictement typés.

Le typage strict des formulaires réactifs vise à améliorer l’expérience du développeur dans la gestion des entrées de formulaire où les valeurs sont susceptibles de changer au fil du temps. Les formulaires typés fourniront autant de sécurité de type que possible pour les valeurs contenues dans les contrôles de formulaire, les groupes et les tableaux. La valeur de n’importe quel qui survient avec les formulaires crée une faute de frappe ou un transtypage incohérent.

Pourtant, la fonctionnalité strictement typée est due aux RFC qui ont été construits sur la base des contributions de certains membres de la communauté angulaire.

Vous pouvez désormais ajouter progressivement la saisie à vos formulaires existants avec une rétrocompatibilité, car les schémas mis à jour permettent une migration progressive vers des formulaires dactylographiés. Vous pouvez également activer les types à votre propre rythme <ng update> remplacera les classes de formulaire par des versions non typées.

Vous pouvez commencer avec cette nouvelle fonctionnalité en recherchant des contrôles de formulaire non typés et en migrant vers les nouveaux formulaires typés, sauf si la classe est intentionnellement non typée.

Diagnostics de modèle étendus

Cela aide les développeurs à se prémunir contre les erreurs courantes. Les diagnostics donnent un avertissement opportun sur ces erreurs avec des actions précises et immédiates que vous pouvez prendre pour détecter les bogues avant de les remarquer. Nous pouvons le voir dans ces deux erreurs.

• L’invalide Erreur « banane dans une boîte » dans une reliure à double sens. Il s’agit de l’erreur de syntaxe courante où les développeurs ont tendance à inverser les crochets et les parenthèses formant
  ([ ]) à la place de [( )].
• L’erreur par coalescence nulle sur des valeurs non nulles. Cette erreur ?? se produit lorsque le compilateur rencontre une entrée qui n’est pas « nullable », ce qui signifie que son type n’inclut pas « null » ou « undefined ».

Les diagnostics étendus sont affichés à la fois dans le compilateur et dans le Service de langage angulaire. Angular prend en charge la configuration via le fichier tsconfig.json où vous pouvez spécifier si l’avertissement doit être un Attention, Erreur ou réprimercar les développeurs peuvent souhaiter personnaliser les diagnostics étendus.

Messages d’erreur arborescents

L’équipe a ajouté de nouveaux codes d’erreur d’exécution. Lorsque les codes d’erreur sont robustes, il devient plus facile de référencer et de trouver des informations pour déboguer le code. Avec cela, l’optimiseur de build peut désormais secouer l’arborescence des messages d’erreur et conserver les codes d’erreur. L’équipe promet de continuer à refactoriser les erreurs existantes pour tirer le meilleur parti de ce nouveau format.

@Component({...})
class MyComponent {}
@Directive({...})
class MyDirective extends MyComponent {}  

> Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent.

> NG0903: Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent.

> NG0903

Plus d’améliorations intégrées

Angular a toujours été soucieux d’optimiser la vitesse, c’est pourquoi la v14 inclut la prise en charge de TypeScript 4.7, permettant à la CLI d’expédier des codes plus petits sans réduire la valeur. Nous allons examiner certaines de ces améliorations :

• Injecteurs pour vue embarquée : Vous pouvez maintenant utiliser ViewContainerRef.createEmbeddedView et TemplateRef.createEmbeddedView pour passer un injecteur facultatif lors de la création d’une vue intégrée car la nouvelle v14 le prend désormais en charge. Avec l’injecteur, l’injection de dépendance peut être personnalisée dans un modèle spécifique, vous fournissant des API plus propres pour les composants d’auteur réutilisables.

• NgModel OnPush : Dans la v14, les modifications de NgModel sont désormais reflétées dans l’interface utilisateur des composants OnPush. Réalisée avec la contribution d’Artur Androsovych, cette mise à jour a résolu un problème indiquant que NgModule ne fonctionnait pas correctement lors de l’utilisation d’une détection de changement OnPush.

Nouvelles primitives et améliorations de l’outillage

• Nouvelles primitives dans le kit de développement de composants d’Angular : Le CDK d’Angular est un pack de primitives de comportement qu’Angular utilise pour créer des composants. Avec la v14, le CDK menu et Dialogue ont été promus stables.

Issu de la blog officiel angulaire

• Améliorations de la CLI angulaire : Il y a plus de cohérence dans la CLI angulaire avec des arguments CLI standardisés. La prise en charge des arguments de casse camel a été supprimée et l’utilisation d’alias combinés est désormais prise en charge. D’achèvement a été amélioré avec la saisie semi-automatique en temps réel. Vous pouvez exécuter manuellement d’achèvement pour obtenir automatiquement cette CLI configurée pour vous. De la cachette vous permet de contrôler et d’imprimer les informations du cache à partir de la ligne de commande. De l’analytique, lorsqu’il est activé, vous permet de contrôler le paramètre d’analyse. Ces améliorations des outils contribuent à créer un environnement de développement plus solide.

Issu de la Documents angulaires

• Les DevTools sont désormais disponibles hors ligne et dans Firefox. Dans la v14, vous pouvez accéder à Angular DevTools hors ligne et trouver l’extension de débogage Angular DevTools ici pour les utilisateurs de Firefox.

Premiers pas avec angulaire 14

Vous pouvez installer v14 via npm, puis ouvrir une nouvelle CLI. Exécutez la commande ci-dessous pour installer si vous souhaitez l’exécuter globalement :

ng update @angular/core@14 @angular/cli@14

Vous pouvez également consulter le guide officiel de mise à jour angulaire sur ce lien. Si vous utilisez déjà la v13, vous pouvez passer directement à la nouvelle version à l’aide de la commande ci-dessous.

ng update @angular/core @angular/cli

Conclusion

Nous savons qu’Angular travaille toujours pour rendre l’expérience facile et évolutive, et ces nouveaux ajouts sont là pour faire exactement cela. Les formes réactives typées sont les changements qui me passionnent le plus. Qu’en pensez-vous?