Angular 4: geen component factory gevonden, heb je het toegevoegd aan @NgModule.entryComponents?

Ik'm gebruik Angular 4 sjabloon met webpack en ik heb deze fout wanneer ik probeer om een component (ConfirmComponent) te gebruiken:

Geen component fabriek gevonden voor ConfirmComponent. Heb je het toegevoegd aan @NgModule.entryComponents?

De component is gedeclareerd in app.module.server.ts

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

Ik heb ook app.module.browser.ts en app.module.shared.ts

Hoe kan ik dat oplossen?

Oplossing

Voeg dit toe in je module.ts,

declaraties: [
  AppComponent,
  BevestigComponent
]

als ConfirmComponent in een andere module zit, moet je het daar exporteren zodat je het daarbuiten kunt gebruiken, voeg toe:

exporteert: [ ConfirmComponent ]

In het geval van een dynamisch geladen component en om een ComponentFactory te kunnen genereren, moet de component ook worden toegevoegd aan de entryComponents van de module:

declaraties: [
  AppComponent,
  ConfirmComponent
],
invoerComponenten: [ConfirmComponent],

volgens de definitie van entryComponents

Specificeert een lijst van componenten die moeten worden gecompileerd wanneer deze module wordt gedefinieerd. Voor elke component die hier wordt vermeld, zal Angular een ComponentFactory aanmaken en deze opslaan in de ComponentFactoryResolver.

Commentaren (12)

Ik had hetzelfde probleem. In dit geval is imports [...] cruciaal, want het zal'niet werken als je NgbModalModule niet importeert.

Fout beschrijving zegt dat componenten moeten worden toegevoegd aan entryComponents array en het is duidelijk, maar zorg ervoor dat je deze in de eerste plaats hebt toegevoegd:

imports: [
    ...
    NgbModalModule,
    ...
  ],
Commentaren (5)

als u routing gebruikt in uw toepassing

zorg ervoor dat u nieuwe componenten toevoegt aan het routing pad

bijvoorbeeld :

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