CODEWITHSUNDEEP
angularangular-webpack-starter
mrapi
mrapi

Reputation: 6023

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

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?

Upvotes: 369

Views: 436977

Answers (25)

Nitin Singhal
Nitin Singhal

Reputation: 641

I might be replying late on this. But removing this can be helpful for some people who are still looking for solutions to this problem and has this in their code. We had below entry since long in our tsconfig.json file:

  "angularCompilerOptions": {
    "enableIvy": false
  }

We also face same problem. After lot of experiments, we removed this block from tsconfig.json. Now our code is not complaining this problem anymore.

Upvotes: -2

Mojtaba Nava
Mojtaba Nava

Reputation: 878

In this section, you must enter the component that is used as a child in addition to declarations: [CityModalComponent](modal components) in the following section in the app.module.ts file:

 entryComponents: [
CityModalComponent
],

Upvotes: 0

iGanja
iGanja

Reputation: 2474

If you still haven't resolved this issue - like me - here is what caused this error for me. As @jkyoutsey suggested, I was indeed trying to create a modal component. I spent considerable time following his suggestions by moving my component to a service and injecting it into the page component. Also changing providedIn: 'root' to MyModule, which of course had to be moved at least one level up to avoid a circular reference. I'm not all together sure any of that actually was necessary.

What finally solved the 8-hour long puzzle was to NOT implement ngOnInit in my component. I had blindly implemented ngOnInit even though the function was empty. I tend to do that. It's probably a bad practice.

Anyway, if someone could shed light on why an empty ngOnInit would have caused this error, I'd love to read the comments.

Upvotes: 0

kuldeep chopra
kuldeep chopra

Reputation: 792

i import the material design dialog module , so i created aboutcomponent for dialog the call this component from openDialog method then i got this error , i just put this

declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

Upvotes: 2

Fateh Mohamed
Fateh Mohamed

Reputation: 21387

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.

Upvotes: 545

Youness HARDI
Youness HARDI

Reputation: 532

You should import the NgbModule in the module like this:

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

Upvotes: 3

upks praveen
upks praveen

Reputation: 25

In my case i solved this issue by:
1) placing NgxMaterialTimepickerModule in app module imports:[ ]
2) placing NgxMaterialTimepickerModule in testmodule.ts imports:[ ]
3) placing testcomponent in declartions:[ ] and entryComponents:[ ]

(I'm using angular 8+ version)

Upvotes: 0

jkyoutsey
jkyoutsey

Reputation: 2041

  1. entryComponents is vital. Above answers on this are correct.

But...

  1. If you're providing a service that opens the modal (a common pattern) and your module that defines the dialog component is not loaded in AppModule, you need to change providedIn: 'root' to providedIn: MyModule. As general good practice you should just use the providedIn: SomeModule for all dialog services that are in modules.

Upvotes: 3

Chamila Maddumage
Chamila Maddumage

Reputation: 3876

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
  ],

Upvotes: 8

f.khantsis
f.khantsis

Reputation: 3560

In my case, I forgot to add MatDialogModule to imports in a child module.

Upvotes: 8

Furqan S. Mahmoud
Furqan S. Mahmoud

Reputation: 1465

I'm using Angular8, and I'm trying to open the component dynamically form another module, In this case, you need to import the module into the module that's trying to open the component, of course in addition to export the component and list it into the entryComponents array as the previous answers did.

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

Upvotes: 0

JanBrus
JanBrus

Reputation: 1520

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

Upvotes: 2

mgierw
mgierw

Reputation: 75

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

Upvotes: 2

sensei
sensei

Reputation: 7592

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.

Upvotes: 2

Ali Adravi
Ali Adravi

Reputation: 22823

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

Upvotes: 158

neox5
neox5

Reputation: 1861

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.

Upvotes: 67

MayankGaur
MayankGaur

Reputation: 993

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

Upvotes: 15

Muhammad Nasir
Muhammad Nasir

Reputation: 2204

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.

Upvotes: 8

Eric Hewett
Eric Hewett

Reputation: 557

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) ],

Upvotes: 3

Dovev Hefetz
Dovev Hefetz

Reputation: 1466

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.

Upvotes: 3

Omar AMEZOUG
Omar AMEZOUG

Reputation: 998

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

Upvotes: 10

Felipe Bejarano
Felipe Bejarano

Reputation: 526

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(),
   ...
]

Upvotes: 8

RohitAneja
RohitAneja

Reputation: 1011

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

entryComponents:[ConfirmComponent],

as well as Declarations:

declarations: [
    AppComponent,
    ConfirmComponent
]

Upvotes: 26

Alex Link
Alex Link

Reputation: 1240

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,
    ...
  ],

Upvotes: 55

Mohamathu Rafi
Mohamathu Rafi

Reputation: 113

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 },
];

Upvotes: 7

Related Questions