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

Question

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 1

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.

Answer 2

See the details about entryComponent:

If you are loading any component dynamically then you need to put it in both declarations and entryComponent:

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

Answer 3

TL;DR: A service in ng6 with providedIn: "root" cannot find the ComponentFactory when the Component is not added in the entryComponents of app.module.

This problem can also occur if you are using angular 6 in combination with dynamically creating a Component in a service!

For example, creating an Overlay:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

The Problem is the

providedIn: "root"

definition, which provides this service in app.module.

So if your service is located in, for example, the "OverlayModule", where you also declared the OverlayExampleComponent and added it to the entryComponents, the service cannot find the ComponentFactory for OverlayExampleComponent.