Angular 4: no component factory found,did you add it to @NgModule.entryComponents?

mrapi picture mrapi · Oct 28, 2017 · Viewed 339.5k times · Source

I'm using Angular 4 template with webpack and I have this error when I try to use a component (ConfirmComponent):

No component factory found for ConfirmComponent. Did you add it to @NgModule.entryComponents?

The component is declared in app.module.server.ts

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

I have also app.module.browser.ts and app.module.shared.ts

How can I fix that?

Answer

Fateh Mohamed picture Fateh Mohamed · Oct 28, 2017

Add this in your module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

if ConfirmComponent is in another module, you need to export it there thus you can use it outside, add:

exports: [ ConfirmComponent ]

---Update Angular 9 or Angular 8 with Ivy explicitly enabled---

Entry Components With Ivy are not required anymore and now are deprecated

---for Angular 9 and 8 with Ivy disabled---

In the case of a dynamically loaded component and in order for a ComponentFactory to be generated, the component must also be added to the module’s entryComponents:

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

according to the definition of entryComponents

Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.