PC & Mobile

Composants pouvant être manipulés dans les arbres et modules facultatifs

Composants pouvant être manipulés dans les arbres et modules facultatifs


NgModule est sans doute l’un des concepts angulaires les plus déroutants.

Heureusement, Angular s’oriente vers un avenir dans lequel nous avons besoin de modules angulaires (NgModules) moins souvent ou pas du tout.

Dans une future version de Angular, Ivy nous permettra d’amorcer ou de restituer des composants dans le DOM sans aucun module Angular. Nous pourrons également utiliser d'autres composants, directives et tuyaux dans nos modèles de composants sans modules angulaires pour les résoudre.

Ces fonctionnalités ne sont pas encore disponibles, mais nous pouvons commencer à nous préparer maintenant pour faciliter la migration.

Composants pouvant être manipulés dans les arbres

Dans la génération angulaire actuelle, un composant ne peut et ne doit être déclaré que dans un seul fichier. NgModule. le déclarables (composants, directives et tuyaux) utilisables par ce composant est déterminé lors de la compilation à partir des métadonnées de son module angulaire déclarant.

Portée du module transitif

Chaque module angulaire a un Portée du module transitif qui est décidé au moment de la compilation. La portée du module transitif comprend en réalité deux portées: une portée de compilation transitive et une portée exportée transitive.

Portée exportée transitive

La portée transitive exportée est constituée de tous les déclarables qu'un module angulaire répertorie dans exportations option de ses métadonnées. Il peut également réexporter d'autres modules angulaires en les répertoriant dans la même option. Leurs périmètres d’exportation feront alors partie du périmètre exporté transitif de ce module angulaire.

Portée de la compilation transitive

La portée de compilation transitive d'un module angulaire comprend tous les déclarables qu'un composant déclaré par ce module angulaire peut utiliser dans son modèle.

Les composants, les directives et les tuyaux sont combinés avec la portée transitive exportée des modules angulaires répertoriés dans la liste. importations option des métadonnées de ce module angulaire.

Portée de la compilation du module Transitive Hero

Voyons un exemple d’étendue de module transitif.

Le héros et le héros listent les composants déclarés par le même module angulaire. Ouvrir dans un nouvel onglet.

le HeroModule déclare deux composants. Ils partagent tous les deux une portée de compilation transitive.

Figure 1. Portée de la compilation transitive du module hero.

La figure 1 illustre la portée de la compilation transitive de HeroModule. La portée - surlignée en rouge - comprend HeroComponent, HeroListComponent et tous les objets déclarables exportés par CommonModule.

HeroListComponent est compilé dans le contexte de HeroModule«La portée de la compilation transitive. C'est pourquoi il peut rendre HeroComponents utilisant Mots clés. Ils sont tous deux déclarés dans HeroModule.

Le composant de la liste des héros utilise également AsyncPipe dans son modèle en utilisant son nom de pipe, async. Ceci est un exemple de déclarable disponible depuis HeroModule importations CommonModule. De même, le NgForOf directive structurelle est utilisée dans le modèle de composant de liste de héros, même si elle est déclarée par CommonModule.

De même, la composante héros utilise le Ngf directive structurelle pour le rendu conditionnel du contenu dans son modèle.

Portée de la composante locale

La réécriture de Angular Ivy peut introduire une portée au niveau du composant pour les dépendances déclarables. C'est appelé portée du composant local.

Angular avait auparavant une portée de composant local pour les objets déclarables. La dernière version à prendre en charge était Angular 2 RC5. À l'époque, le Composant usine de décorateur soutenu les options les directives et des pipes.

La demande de tir angulaire n ° 27841 et la démonstration de validation de concept en lierre angulaire de Minko Gechev, membre de l’équipe angulaire, suggèrent que Composant usine de décorateur pourrait obtenir une option appelée deps qui prend un tableau ou un tableau imbriqué de déclarables utilisés dans le modèle de composant. L'implémentation finale et l'API peuvent différer.

Figure 2. Étendues des composants locaux du composant de liste de héros et du composant de héros.

La figure 2 illustre les portées de composant locales du composant de liste de héros et du composant de héros si elles ont été converties en composants pouvant être transformés en arborescence avec la syntaxe de la requête Pull # 27841. Un module angulaire héros ne serait pas nécessaire. Le CommonModule.

Avec Angular Ivy, nous serons en mesure de restituer un composant indépendamment d’une NgModule. Ivy nous permettra même de charger et de rendre paresseux un composant sans module angulaire ni routeur angulaire.

Modules angulaires à un composant

Nous ne pouvons pas encore créer de composants avec une portée locale, mais nous pouvons commencer à préparer l’avenir avec Arnaques (Modules angulaires à composant unique).

Pour chaque composant, nous créons un NgModule qui importe uniquement les objets déclarables utilisés par ce composant spécifique. De même, il déclare et exporte uniquement ce composant unique.

Une arnaque (module angulaire à composant unique). Ouvrir dans un nouvel onglet.

Bien sûr, c'est un peu plus de travail, mais j'ai quand même commencé à le faire dans la plupart des endroits. Il est plus facile de maintenir une liste actuelle de dépendances déclarables pour conserver une petite taille d'ensembles.

Lorsqu'on examine une arnaque, il suffit de prendre en compte un seul composant pour déterminer si une importation de module angulaire est utilisée.

Les SCAM sont également utiles pour les tests car elles importent exactement les objets déclarables nécessaires au composant à tester.

Ils pourraient même s'avérer utiles pour utiliser le système de compilation Bazel. L'utilisation d'un paquet Bazel par module angulaire rend le processus de construction et la configuration de Bazel plus transparent.

Conversion en composants utilisables dans les arbres

À l’avenir, nous pourrions combiner un composant et sa SCAM en un composant pouvant être transformé en arborescence en déplaçant les dépendances importées par le composant. NgModule dans le deps option du Composant décorateur. Nous convertirions les dépendances des références de modules angulaires en références aux objets déclarables que nous utilisons dans notre modèle.

Un composant pouvant être manipulé dans les arbres. Ouvrir dans un nouvel onglet.

Par exemple MatButtonModule est converti en MatButton. Actuellement, les composants du matériau angulaire n'ont pas été compilés avec Angy Ivy et publiés sous forme de composants pouvant être agités par les arbres. Ce sera probablement le cas pour beaucoup de bibliothèques pendant un moment.

Heureusement, Angular Ivy a pris cela en considération. Ivy est livré avec 2 compilateurs. Le compilateur Ivy principal est exécuté via le ngtsc processus qui est une enveloppe fine autour du compilateur TypeScript qui transforme les décorateurs angulaires en métadonnées stockées dans des propriétés de classe statiques.

Le deuxième compilateur fourni avec Ivy s’appelle ngcc qui est l'abréviation de Angular Compatibility Compiler. Nous pouvons convertir les bibliothèques pré-Ivy en node_modules en exécutant lierre-ngcc en tant que script NPM ou en utilisant NPX (npx ivy-ngcc). Il est logique de le faire dans le postinstall Crochet NPM.

Test de composants pouvant être manipulés

Lorsque l'intégration teste aujourd'hui nos composants angulaires avec les utilitaires de test angulaire, nous pouvons remplacer les composants enfants de la vue en ajoutant de faux composants avec les mêmes sélecteurs au module de test angulaire.

Avec les composants shakable dans l’arbre, les composants enfants de la vue utilisés sont déclarés dans Composant décorateur. L'équipe Angular devrait ajouter une API pour remplacer les objets déclarables de la portée locale lors des tests.

Amorcer un composant pouvant être manipulé dans les arbres

Depuis la version 2 angulaire, l’amorçage d’une application angulaire nous a obligé à créer un module angulaire avec un bootstrap option pointant sur un composant racine - par convention, la AppModule et AppComponent, respectivement.

Nous sommes également habitués à initialiser une plate-forme et à amorcer le AppModule dans notre fichier principal.

Démarrer une application pré-Ivy Angular. Ouvrir dans un nouvel onglet.

Avec le rendu Angular Ivy, cette approche pourrait appartenir au passé.

Amorcer un composant Ivy Angular. Ouvrir dans un nouvel onglet.

Nous passons simplement notre composant racine à rendreComposant dans le fichier principal. Par défaut, rendreComposant assume la plate-forme du navigateur en utilisant un moteur de rendu DOM.

Ivy se débarrasse même du enableProdMode une fonction. Au lieu de cela, une variable d'objet globale appelée ngDevMode est utilisé. Les futurs outils devraient permettre la configuration automatique de cette variable.

Pour que l'injection de dépendance fonctionne, nous créons un injecteur de racine.

Si nous utilisons des crochets de cycle de vie dans AppComponent, nous devrons aussi ajouter LifeCycleHooksFeature au fonctionnalités tableau d'options. Notez que cela n’est nécessaire que pour les composants démarrés avec des hooks à cycle de vie. Les composants enfants ne doivent pas ajouter cette fonctionnalité.

Pour assainir le contenu rendu et les attributs HTML, nous ajoutons un assainisseur DOM.

Ce n'est pas ce à quoi nous nous attendons

Si nous choisissons d’amorcer un composant avec rendreComposant, nous désactivons de nombreuses fonctionnalités attendues d’une application Angular:

  • Non NgZone
  • Pas d'initialisateurs d'application
  • Pas d'état d'initialisation de l'application
  • Pas de crochets d'amorçage d'application
  • Aucune détection de changement sur les changements d'état de l'interface utilisateur locale

Au lieu de cela, nous devons dire à Angular que nous avons changé l’état de l’UI locale dans les propriétés du composant en utilisant markDirty une fonction.

L'amorçage d'un composant pouvant être manipulé dans les arbres est facultatif

Il est important de mentionner que l’amorçage d’un composant shakable dans les arbres est un mécanisme de rendu opt-in puisque Angular Ivy sera totalement compatible avec les versions antérieures. Nous pourrons toujours amorcer un module angulaire et obtenir toutes les fonctionnalités auxquelles nous sommes habitués sans avoir à gérer nous-mêmes la saleté de l’interface utilisateur locale.

Plus de composants d'entrée explicites

Angular Ivy élimine notre code compilé d'usines de modules angulaires. Nos composants contiennent leur usine de composants dans leurs métadonnées. Ils sont autonomes, indépendants et peuvent être manipulés par les arbres.

Cela signifie que nous pouvons amorcer n'importe quel composant sur le DOM. De même, nous pouvons rendre dynamiquement n'importe quel composant au DOM par le biais d'un conteneur de vue, d'une sortie de composant, d'une sortie de modèle, d'une sortie de portail CDK, d'une sortie de routeur ou simplement. rendreComposant.

Comme chaque composant compilé avec Ivy peut être utilisé comme composant d’entrée, le entryComponents option pour le Composant le décorateur deviendra superflu pour les composants pouvant être manipulés par les arbres.

Chargement paresseux des composants agaçables dans l'arbre

Le routeur angulaire a été le principal moyen de scinder le code de nos applications. Il y a d'autres moyens comme le modules paresseux option du fichier de configuration CLI angulaire, angular.json, ou même fournir notre propre NgModuleFactoryLoader.

À un moment donné, Ivy nous permettra de charger et de rendre paresseux des composants pouvant être agités par une arborescence. Probablement en utilisant la dynamique de type fonction importation mot-clé. Ça ressemble à quelque chose comme import (’./ my-ivy.component’). then (composantType => renderComponent (composantType)).

Dépendances arbre-shakable

Les modules angulaires étaient traditionnellement la méthode principale pour configurer les injecteurs pour les services basés sur les classes et autres dépendances. Depuis la version 6 angulaire, nous pouvons souvent fournir des dépendances sans aucune NgModules impliqué.

Il est plus facile de raisonner sur les dépendances à base d'arborescence et moins sujettes aux erreurs. Mieux encore, ils permettent de créer des ensembles d'applications plus petits, en particulier s'ils sont utilisés dans des dépendances partagées et des bibliothèques publiées.

Comme dans la plupart des autres aspects, Angular est très flexible en matière de dépendances. Apprenez-en davantage à leur sujet dans «Dépendances interminables dans les projets angulaires».

Toujours utile pour les fournisseurs dynamiques et les fournisseurs multiples

Un endroit où les modules angulaires sont toujours utiles consiste à créer des fournisseurs dynamiques tels que des valeurs de configuration. C'est exactement ce que le RouteurModule fait avec ses méthodes statiques pourRoot et pour enfant.

Un autre exemple d'utilisation encore utilisée par les modules angulaires concerne les fournisseurs multiples. Angulaire APP_INITIALIZER est un exemple courant de cela.

Bibliothèques et lots partagés

Comme indiqué dans la section «Dépendances interchangeables dans les projets angulaires», les bibliothèques angulaires et les ensembles partagés peuvent faire bon usage des fournisseurs adaptables en arborescence. Avec l’optimiseur de construction de l’outil de développement angulaire, inclus dans la configuration de production par défaut de la CLI angulaire, même les objets déclarables non utilisés peuvent être transformés en arborescence.

Cependant, les composants d’entrée ne sont pas modulables. Une bibliothèque telle que Angular Material comporte en réalité quelques composants d’entrée. Chaque composant rendu par le biais d'une incrustation CDK angulaire ou d'une prise de portail doit être déclaré en tant que composant d'entrée. Cela inclut les composants Autocomplete, Datepicker et Select de Angular Material.

Si Angular Material n’avait divisé que ses éléments déclarables en un seul module Angular, nous ajouterions tous ses composants d’entrée à notre ensemble d’applications dès l’importation de la bibliothèque.

Schémas de compilation

Une dernière chose que les modules angulaires résolvent actuellement sont les schémas de compilation. Des exemples sont CUSTOM_ELEMENTS_SCHEMA et NO_ERRORS_SCHEMA. Je ne connais pas la façon dont Ivy gère cela en ce qui concerne les composants pouvant être manipulés par les arbres. Jusqu'ici, les indications montrent qu'il incombera au navigateur de gérer des éléments personnalisés inconnus d'Angular.

Ce que pense l'équipe de base angulaire

Quand il a demandé à AngularConnect 2018 ce qu’il voudrait déchirer ou faire différemment dans Angular, Igor Minar a répondu qu’en haut de sa liste d’éléments à supprimer sont les modules angulaires et que l’équipe centrale angulaire s’efforce de les rendre facultatifs.

je pense NgModule est quelque chose que si nous n’avions pas à le faire, nous ne le ferions pas. À l'époque, il y avait un réel besoin. Avec Ivy et d’autres changements apportés à Angular au fil des ans, nous travaillons à les rendre facultatifs.
- Igor Minor à AngularConnect 2018

Alex Rickabaugh est d’accord et ajoute que cela déroute souvent les nouveaux développeurs Angular.

Le chemin NgModule les travaux ont tendance à être source de confusion pour les nouveaux développeurs angulaires. Même si nous n’allions pas tout supprimer, nous changerions son fonctionnement et simplifierions les choses.
- Alex Rickabaugh à AngularConnect 2018

Résumé

Les modules angulaires ont toujours été des artefacts logiciels nécessaires à la configuration des injecteurs et à la résolution des objets déclarables des composants. La portée fournie par un module angulaire était nécessaire pour résoudre les objets déclarables, car nous ne les référons que par leurs sélecteurs et leurs noms de canaux dans nos modèles de composants.

Malheureusement, cette couche d'indirection s'est avérée difficile à apprendre et à raisonner, en particulier pour les nouveaux venus dans l'écosystème angulaire. Avec les modifications récentes de l’API pour les jetons d’injection et la prochaine réécriture de Angular Ivy, nous pourrons bientôt créer des applications et des bibliothèques sans NgModules.

Nous n’avons même pas besoin d’attendre. Nous pouvons déjà nous libérer des modules angulaires pour configurer les injecteurs. Nous pouvons également commencer à préparer des composants pouvant être agités par des arbres avec des modules angulaires à un composant.

Même si Ivy nous permet de déclarer deps dans nos composants compatibles avec les arborescences, nous devrons malheureusement toujours garder ces listes synchronisées avec les déclarables utilisés dans nos modèles de composants. L'outil angulaire peut peut-être automatiser cela plus tard.

Enfin, il est important de mentionner que NgModules ne partent pas de sitôt. Vous pouvez toujours les utiliser, mais comme le montrent les techniques décrites dans cet article, elles deviendront dans de nombreux cas facultatives.

Rendez-vous dans un avenir moins NgModular! 🚀

Articles Liés

L'injection de dépendance est une caractéristique clé de Angular. Depuis la version 6 d'Angular, nous pouvons configurer des dépendances pouvant être placées dans une arborescence qui sont plus faciles à raisonner et à compiler pour créer des ensembles plus petits. Apprenez tous les détails dans «Dépendances interminables dans les projets angulaires».

Pairs examinateurs

Un énorme merci à tous mes collègues professionnels angulaires qui m'ont fourni de précieux commentaires sur cet article et fourni des informations techniques approfondies sur Angular Ivy

Je rencontre des personnes formidables et utiles comme celles-ci dans les communautés Angular In Depth, AngularBeers et Angular Gitter.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close