Angular 4: aucune fabrique de composants trouvée, l'avez-vous ajoutée à @ NgModule.entryComponents?


300

J'utilise le modèle Angular 4 avec webpack et j'ai cette erreur lorsque j'essaie d'utiliser un composant (ConfirmComponent):

Aucune fabrique de composants trouvée pour ConfirmComponent. L'avez-vous ajouté à @ NgModule.entryComponents?

Le composant est déclaré dans app.module.server.ts

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [
    // ...
  ],
  entryComponents: [
    ConfirmComponent,
  ],
})
export class AppModule { }

J'ai aussi app.module.browser.tsetapp.module.shared.ts

Comment puis-je résoudre ce problème?


1
Comment utilisez-vous ConfirmComponentles détails ne suffisent pas pour répondre à votre question
Anik

Salut. Je l'utilise après avoir imprimé dans mon import de composants {ConfirmComponent} de "../confirm.component/confirm.component";
mrapi


S'il va agir comme un composant commun, vous pouvez le mettre dans les déclarations et les composants d'entrée de CommonModule, et le retirer d'autres endroits.
Charitha Goonewardena

1
Pour la boîte de dialogue angulaire, même erreur et correction! freakyjolly.com/…
Code Spy

Réponses:


438

Ajoutez ceci dans votre module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

si ConfirmComponent est dans un autre module, vous devez l'exporter ainsi vous pouvez l'utiliser à l'extérieur, ajoutez:

exports: [ ConfirmComponent ]

--- Mettre à jour Angular 9 ou Angular 8 avec Ivy explicitement activé ---

Les composants d'entrée avec Ivy ne sont plus nécessaires et sont désormais obsolètes

--- pour Angular 9 et 8 avec Ivy désactivé ---

Dans le cas d'un composant chargé dynamiquement et pour qu'un ComponentFactory soit généré, le composant doit également être ajouté à l'entrée du moduleComponents:

declarations: [
  AppComponent,
  ConfirmComponent
],
entryComponents: [ConfirmComponent],

selon la définition de entryComponents

Spécifie une liste de composants qui doivent être compilés lorsque ce module est défini. Pour chaque composant répertorié ici, Angular créera un ComponentFactory et le stockera dans ComponentFactoryResolver.


3
Hi.it est déjà dans app.module.shared.ts et entryComponents est dans app.module.server.ts
mrapi

4
si ConfirmComponent est dans un autre module, vous devez l'exporter ainsi vous pouvez l'utiliser à l'extérieur, ajoutez: exports: [ConfirmComponent] dans votre app.module.shared.ts
Fateh Mohamed

1
c'est le composant ng2-bootstrap-modal de github.com/ankosoftware/ng2-bootstrap-modal/blob/master/…
mrapi

9
Merci à vous tous. !!!!!!! .. mettre toutes les déclarations et entryComponents dans le même fichier app.module.shared.ts a résolu le problème
mrapi

9
les exportations ne fonctionnent pas ... L'option entryComponents fonctionne pour moi!.
Raja Rama Mohan Thavalam

133

Voir les détails sur entryComponent:

Si vous chargez un composant dynamiquement, vous devez le mettre à la fois declarationset entryComponent:

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
})

5
Merci, je veux dire, MERCI !!! Je créais une boîte de dialogue pour entrer des données dans un autre composant (la boîte de dialogue a sa déclaration de composant dans l'autre composant et dialog.html pour la mise en page)
Ramon Araujo

3
Cela a fait l'affaire pour moi et a également une meilleure explication que la réponse choisie. Je vous remercie!
Arsen Simonean

2
Clairement la meilleure réponse pour moi!
tuxy42

C'était la solution pour moi; Je créais un composant à la volée et j'avais tout dans les bons modules mais j'obtenais toujours l'erreur. Ajouter mes composants créés entryComponentsétait la solution - merci!
Novastorm

2
mon composant qui appelle ModalComponent est le petit-fils d'un composant. Ni l' ajout du ModalComponent à entryComponentsni l' ajouter à exportstravaillé pour moi. MAIS je peux appeler le ModalComponent à partir d'autres composants qui ne sont pas des petits
canbax

55

TL; DR: Un service en NG6 avec providedIn: "root"ne peut pas trouver le ComponentFactory lorsque le composant est pas ajouté dans le entryComponentsde app.module .

Ce problème peut également se produire si vous utilisez angular 6 en combinaison avec la création dynamique d'un composant dans un service!

Par exemple, créer une superposition:

@Injectable({
  providedIn: "root"
})
export class OverlayService {

  constructor(private _overlay: Overlay) {}

  openOverlay() {
    const overlayRef = this._createOverlay();
    const portal = new ComponentPortal(OverlayExampleComponent);

    overlayRef.attach(portal).instance;
  }
}

Le problème est le

providedIn: "root"

définition, qui fournit ce service dans app.module .

Ainsi, si votre service se trouve, par exemple, dans le "OverlayModule", où vous avez également déclaré OverlayExampleComponent et l'avez ajouté à entryComponents, le service ne peut pas trouver ComponentFactory pour OverlayExampleComponent.


3
Problème spécifique à Angular 6. Résolvez le problème en ajoutant votre composant à entryComponents dans @NgModule @NgModule ({entryComponents: [yourComponentName]})
DeanB_Develop

6
Cela peut être corrigé en supprimant providedInet en utilisant plutôt l' providersoption sur le module.
Knelis

Merci pour l'info, mais l'ajout à @NgModule ({..., entryComponents: [...]}) a fonctionné pour moi même avec providedIn: "root"
Mykola Mykolayovich Dolynskyi

1
cela semble lié à github.com/angular/angular/issues/14324 il semble que cela sera résolu dans Angular 9
Paolo Sanchi

Exactement, en particulier dans le module paresseux. Pour résoudre ce problème, j'ai spécifié NgModule.providers: [MyLazyLoadedModuleService] et changé MyLazyLoadedModuleService.providedIn de "root" en MyLazyLoadedmodule.
Howard

45

J'ai eu le même problème. Dans ce cas, imports [...]c'est crucial, car cela ne fonctionnera pas si vous n'importez pas NgbModalModule.

La description de l'erreur indique que les composants doivent être ajoutés au entryComponentstableau et c'est évident, mais assurez-vous d'avoir ajouté celui-ci en premier lieu:

imports: [
    ...
    NgbModalModule,
    ...
  ],

6
Tu m'as sauvé, bravo! Ceci est absolument nécessaire lorsque vous essayez d'ouvrir un composant dans un modal. Le message d'erreur est un peu trompeur dans cette situation.
beawolf

D'où l'importez-vous?
Mdomin45

Dans mon cas, l'importation de NbDialogModule a été remplacée par NbDialogModule.forChild (null),
Maayan Hope

@ Mdomin45 import {NgbModalModule} de '@ ng-bootstrap / ng-bootstrap';
mpatel

24

Ajoutez ce composant à entryComponents dans @NgModule du module de votre application:

entryComponents:[ConfirmComponent],

ainsi que les déclarations:

declarations: [
    AppComponent,
    ConfirmComponent
]

J'ai sauvé ma journée! Cheers mate
Sahan Serasinghe

mon composant qui appelle ModalComponent est le petit-fils d'un composant. Ni l' ajout du ModalComponent à entryComponentsni l' ajouter à exportstravaillé pour moi. MAIS je peux appeler le ModalComponent à partir d'autres composants qui ne sont pas des petits
canbax

14

Ajoutez «NgbModalModule» dans les importations et le nom de votre composant dans entryComponents App.module.ts comme indiqué ci-dessous entrez la description de l'image ici


mon composant qui appelle ModalComponent est le petit-fils d'un composant. Ni l' ajout du ModalComponent à entryComponentsni l' ajouter à exportstravaillé pour moi. MAIS je peux appeler le ModalComponent à partir d'autres composants qui ne sont pas des petits
canbax

Je dois réitérer cette réponse, si votre composant a déjà été ajouté à entryComponents, et que vous rencontrez toujours le problème, assurez-vous de vérifier le modalComponent que vous utilisez et ajoutez-le sur le tableau des importations! Cela m'a sauvé la vie!
Clyde

10

Placez les composants créés dynamiquement dans entryComponents sous la fonction @NgModuledecorator.

@NgModule({
    imports: [
        FormsModule,
        CommonModule,
        DashbaordRoutingModule
    ],
    declarations: [
        MainComponent,
        TestDialog
    ],
    entryComponents: [
        TestDialog
    ]
})

1
Oui, cela a été très utile - si vous avez dit une boîte de dialogue qui n'est pas captée par une route mais utilisée dynamiquement, elle doit être ajoutée au entryComponentsmodule ng respectif qu'elle a déclaré.
atconway

mon composant qui appelle ModalComponent est le petit-fils d'un composant. Ni l' ajout du ModalComponent à entryComponentsni l' ajouter à exportstravaillé pour moi. MAIS je peux appeler le ModalComponent à partir d'autres composants qui ne sont pas des petits
canbax

10

J'ai le même problème avec angular 6, c'est ce qui a fonctionné pour moi:

@NgModule({
...
entryComponents: [ConfirmComponent],
providers:[ConfirmService]

})

Si vous avez un service comme ConfirmService , vous devez le déclarer dans les fournisseurs du module actuel au lieu de root


8

J'ai eu le même problème pour le bootstrap modal

importer {NgbModal} de '@ ng-bootstrap / ng-bootstrap';

Si tel est votre cas, ajoutez simplement le composant aux déclarations de module et les composants d'entrée comme le suggèrent d'autres réponses, mais ajoutez-le également à votre module

importer {NgbModule} depuis '@ ng-bootstrap / ng-bootstrap';

imports: [
   NgbModule.forRoot(),
   ...
]

8

Cette erreur se produit lorsque vous essayez de charger un composant dynamiquement et:

  1. Le composant que vous souhaitez charger n'est pas un module de routage
  2. Le composant n'est pas dans le module entryComponents.

dans routingModule

const routes: Routes = [{ path: 'confirm-component', component: ConfirmComponent,data: {}}]

ou en module

entryComponents: [
ConfirmComponent
} 

Pour corriger cette erreur, vous pouvez ajouter un routeur au composant ou l'ajouter à entryComponents du module.

  1. Ajoutez un routeur au composant. Le retrait de cette approche est que votre composant sera accessible avec cette URL.
  2. Ajoutez-le à entryComponents. dans ce cas, votre composant ne sera associé à aucune URL et il ne sera pas accessible avec l'URL.

8

J'ai eu le même problème dans Angular7 lorsque je crée des composants dynamiques. Il y a deux composants (TreatListComponent, MyTreatComponent) qui doivent être chargés dynamiquement. Je viens d'ajouter le tableau entryComponents à mon fichier app.module.ts.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

6

si vous utilisez le routage dans votre application

assurez-vous d'ajouter de nouveaux composants dans le chemin de routage

par exemple :

    const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'fundList',      component: FundListComponent },
];

7
Non, je ne pense pas que chaque composant devrait être dans une route.
Mcanic

Seules les pages que vous souhaitez afficher doivent figurer dans les itinéraires. Une page peut utiliser / afficher plusieurs composants
Thibaud Lacan

chaque fois que vous n'avez pas besoin d'ajouter des composants à Route, tels que des modaux. Placez les composants créés dynamiquement dans entryComponents sous la fonction @NgModuledecorator.
CodeMind

3

Dans mon cas, je n'avais pas du tout besoin de entryComponents - juste la configuration de base décrite dans le lien ci-dessous, mais je devais inclure l'importation à la fois dans le module d'application principal et dans le module englobant.

imports: [
    NgbModule.forRoot(),
    ...
]

https://medium.com/@sunilk/getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c

Vous n'avez besoin de l'ajouter à entryComponents que si un composant sera inclus dans le modal. De la documentation:

Vous pouvez passer un composant existant comme contenu de la fenêtre modale. Dans ce cas, n'oubliez pas d'ajouter un composant de contenu en tant que section entryComponents de votre NgModule.


error TS2339: Property 'forRoot' does not exist on type 'typeof NgbModule'.en utilisant angulaire 8
canbax

3

J'obtenais le même problème avec ag-grid en utilisant des composants dynamiques. J'ai découvert que vous devez ajouter le composant dynamique au module ag-grid .withComponents []

Importations: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],


3

Dans mon cas, j'ai oublié d'ajouter MatDialogModuleaux importations dans un module enfant.


2

Pour des éclaircissements ici. Dans le cas où vous n'utilisez pas ComponentFactoryResolverdirectement dans le composant et que vous souhaitez l'abstraire au service, qui est ensuite injecté dans le composant, vous devez le charger sous les fournisseurs de ce module, car s'il est chargé paresseux, cela ne fonctionnera pas.


2

Dans le cas où vous avez toujours l'erreur après avoir fourni la classe de dialogue de composant dans entryComponents, essayez de redémarrer ng serve- cela a fonctionné pour moi.


2

Mon erreur appelait la méthode ouverte NgbModal avec des paramètres incorrects de .html


2

Vous devez importer le NgbModuledans le module comme ceci:

@NgModule({
  declarations: [
    AboutModalComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgxLoadingModule,
    NgbDatepickerModule,
    NgbModule
  ],
  entryComponents: [AboutModalComponent]
})
 export class HomeModule {}


Parfait pour cela, l'exemple de l'url - hassantariqblog.wordpress.com/2017/02/12/…
Juan Ignacio Liska

1
  1. entryComponentsc'est essentiel. Les réponses ci-dessus sont correctes.

Mais...

  1. Si vous fournissez un service qui ouvre le modal (un modèle commun) et que votre module qui définit le composant de dialogue n'est pas chargé dans AppModule, vous devez passer providedIn: 'root'à providedIn: MyModule. Comme bonne pratique générale, vous devez simplement utiliser le providedIn: SomeModulepour tous les services de dialogue qui sont dans les modules.

0

J'utilise Angular8, et j'essaie d' ouvrir le composant de manière dynamique à partir d'un autre module , dans ce cas, vous devez import the moduleentrer dans le module qui essaie d'ouvrir le composant, bien sûr en plus export du composant et le répertorier dans le entryComponentstableau comme l'ont fait les réponses précédentes.

imports: [
    ...
    TheModuleThatOwnTheTargetedComponent,
    ...
  ],

0

Dans mon cas, j'ai résolu ce problème en:
1) plaçant NgxMaterialTimepickerModuleen app module imports:[ ]
2) plaçant NgxMaterialTimepickerModuleen testmodule.ts imports:[ ]
3) plaçant testcomponenten declartions:[ ]etentryComponents:[ ]

(J'utilise la version angulaire 8+)


-1

Déclarez toutes les nouvelles pages dans app.module

@NgModule({
  declarations: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage

    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpClientModule,
    NgxBarcodeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage
    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],

 - 


----------


---------

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.