web-dev-qa-db-fra.com

Qu'est-ce que entryComponents dans ngModule angulaire?

Je travaille sur une application Ionic (2.0.0-rc0) qui dépend de angular 2. La nouvelle introduction de ngModules est donc incluse. J'ajoute mon app.module.ts. ci-dessous.

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

Que fait entryComponents ici? Components sont déjà définis dans declarations. Alors, quel est le besoin de les répéter? Que se passerait-il si je n'incluais pas de composant ici?

angularionic-frameworkionic2
98
raj

Cela concerne les composants ajoutés dynamiquement à l'aide de ViewContainerRef.createComponent(). Leur ajout à entryComponents indique au compilateur de modèles hors ligne de les compiler et de créer des fabriques pour eux.

Les composants enregistrés dans les configurations d'itinéraire sont automatiquement ajoutés à entryComponents également, car router-outlet utilise également ViewContainerRef.createComponent() pour ajouter des composants routés au DOM.

Le compilateur de modèles hors ligne (OTC) ne construit que les composants réellement utilisés. Si des composants ne sont pas utilisés directement dans les modèles, l'OTC ne peut pas savoir s'ils doivent être compilés. Avec entryComponents, vous pouvez indiquer à l'OTC de compiler également ces composants afin qu'ils soient disponibles au moment de l'exécution.

Qu'est-ce qu'un composant d'entrée? (angular.io)

Documents NgModule (angular.io)

Définit les composants à compiler également lorsque ce composant est défini. Pour chaque composant répertorié ici, Angular créera une ComponentFactory et la stockera dans le ComponentFactoryResolver.

Si vous ne répertoriez pas de composant ajouté dynamiquement à entryComponents, vous obtiendrez un message d'erreur concernant une fabrique manquante car Angular n'en aura pas créé.

Voir aussi https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

109
Günter Zöchbauer

Vous n'aurez pas d'explication meilleure que celle des documents angulaires. 

Et ci-dessous est l'explication de la documentation angulaire.

Un composant d’entrée est un composant que Angular charge impérativement par type.

Un composant chargé de manière déclarative via son sélecteur n'est pas un composant d'entrée.

La plupart des composants d'application sont chargés de manière déclarative. Angular utilise le sélecteur de composant pour localiser l'élément dans le modèle. Il crée ensuite la représentation HTML du composant et l'insère dans le DOM de l'élément sélectionné. Ce ne sont pas des composants d'entrée.

Quelques composants ne sont chargés que de manière dynamique et ne sont jamais référencés dans un modèle de composant.

La racine démarrée AppComponent est un composant d’entrée. Certes, son sélecteur correspond à une balise d'élément dans index.html. Mais index.html n'est pas un modèle de composant et le sélecteur AppComponent ne correspond à aucun élément d'un modèle de composant.

Angular charge AppComponent de manière dynamique car il est répertorié par type dans @NgModule.bootstrap ou boosté impérativement avec la méthode ngDoBootstrap du module.

Les composants dans les définitions de route sont également des composants d'entrée. Une définition de route fait référence à un composant par son type. Le routeur ignore le sélecteur d'un composant routé (s'il en a même un) et charge le composant de manière dynamique dans un RouterOutlet.

Le compilateur ne peut pas découvrir ces composants d'entrée en les recherchant dans d'autres modèles de composants. Vous devez en parler en les ajoutant à la liste entryComponents.

Angular ajoute automatiquement les types de composants suivants à la variable entryComponents du module:

  • Le composant dans la liste @NgModule.bootstrap.
  • Composants référencés dans la configuration du routeur.

Il n'est pas nécessaire de mentionner explicitement ces composants, bien que cela soit sans danger.

23
Mav55

Le tableau entryComponents est utilisé pour définir uniquement les composants non trouvés en HTML et créés de manière dynamique. Angular a besoin de cette astuce pour trouver le composant d’entrée et les compiler.

Il existe deux principaux types de composants d'entrée:

  • Le composant racine amorcé.
  • Un composant que vous spécifiez dans une définition de route.

Pour des informations plus détaillées sur les composants d’entrée, veuillez vous référer à angular.io https://angular.io/guide/entry-components

0
sUpEr nInJa

Les autres réponses le mentionnent, mais le résumé de base est le suivant: 

  • il est nécessaire lorsqu'un composant n'est pas utilisé dans un modèle HTML. 
  • Par exemple, lorsque vous utilisez des composants de dialogue Matériau angulaire 

Les composants de la boîte de dialogue Matériau sont créés à l'intérieur du code TS et non du modèle:

openDialog() { const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' }); }

Cela nécessite de l'enregistrer en tant que entryComponent:

  • entryComponents: [MyExampleDialog]

Sinon, vous obtenez une erreur:

  • ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?
0
Mike R

Un peu de contexte sur entryComponent

entryComponent est un composant quelconque Angular se charge impérativement. Vous pouvez déclarer entryComponent en l'amorçant dans NgModule ou dans les définitions de route.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})

Documentation dit ci-dessous

Pour contraster les deux types de composants, certains modèles inclus dans le modèle sont déclaratifs. De plus, il y a des composants que vous chargez impérativement; c'est-à-dire des composants d'entrée.

Maintenant, répondez à votre question spécifique sur entryComponents

Il y a entryComponents tableau dans le fichier @NgModule. Vous pouvez l'utiliser pour ajouter entryComponents si le composant est démarré à l'aide de ViewContainerRef.createComponent().

C'est-à-dire que vous créez des composants de manière dynamique et non par amorçage ou dans un modèle. 

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(myComp.component);
const viewContainerRef = this.compHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
0
Nipuna