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


Translate

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?


All Answers
  • Translate

    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 ]
    

    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.


  • Translate

    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: [...]
    })
    

  • Translate

    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.


  • Translate

    I had the same issue. In this case imports [...] is crucial, because it won't work if you don't import NgbModalModule.

    Error description says that components should be added to entryComponents array and it is obvious, but make sure you have added this one in the first place:

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

  • Translate

    Add that component to entryComponents in @NgModule of your app's module:

    entryComponents:[ConfirmComponent],
    

    as well as Declarations:

    declarations: [
        AppComponent,
        ConfirmComponent
    ]
    

  • Translate

    Add 'NgbModalModule' in imports and your component name in entryComponents App.module.ts as shown below enter image description here


  • Translate

    I have the same problem with angular 6, that's what worked for me :

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

    If you have a service like ConfirmService, have to be declare in providers of current module instead of root


  • Translate

    Place components which are created dynamically to entryComponents under @NgModuledecorator function.

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

  • Translate

    I had the same issue for bootstrap modal

    import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

    If this is your case just add the component to the module declarations and entryComponents as other responses suggest, but also add this to your module

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

  • Translate

    I had same issue in Angular7 when I create dynamic components. There are two components(TreatListComponent, MyTreatComponent) that needs to be loaded dynamically. I just added entryComponents array in to my app.module.ts file.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
    

    ],


  • Translate

    This error occur when you try to load a component dynamically and:

    1. The component you want to load is not routing module
    2. The component is no in module entryComponents.

    in routingModule

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

    or in module

    entryComponents: [
    ConfirmComponent
    } 
    

    To fix this error you can add a router to the component or add it to entryComponents of module.

    1. Add a router to component.drawback of this approach is your component will be accessible with that url.
    2. Add it to entryComponents. in this case your component will not have any url attached to and it will not be accessible with url.

  • Translate

    if you use routing in your application

    make sure Add new components into the routing path

    for example :

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

  • Translate

    In my case I didn't need entryComponents at all - just the basic setup as described in the link below, but I needed to include the import in both the main app module and the enclosing module.

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

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

    You only need to add it to entryComponents if a component will be included in the modal. From the docs:

    You can pass an existing component as content of the modal window. In this case remember to add content component as an entryComponents section of your NgModule.


  • Translate

    I was getting the same issue with ag-grid using dynamic components. I discovered you need to add the dynamic component to the ag-grid module .withComponents[]

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


  • Translate

    For clarification here. In case you are not using ComponentFactoryResolver directly in component, and you want to abstract it to service, which is then injected into component you have to load it under providers for that module, since if lazy loaded it won't work.


  • Translate

    In case you have still the error after providing component dialog class in entryComponents, try to restart ng serve - it worked for me.


  • Translate

    My error was calling NgbModal open method with incorrect parameters from .html