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?

How are you using `ConfirmComponent` the details are not enough to answer your question — Anik, Oct 28 '17 at 13:45
Hi.i'm using it after imprting in my component import { ConfirmComponent } from "../confirm.component/confirm.component"; — mrapi, Oct 28 '17 at 13:53
read here about entry components [Here is what you need to know about dynamic components in Angular](https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e) — Max Koretskyi, Oct 28 '17 at 15:19
If it is going to act as a common component you can put it into CommonModule's declarations and entryComponents, and remove from other places. — Charitha Goonewardena, Jul 11 '19 at 10:10
@CodeSpy the solution in the above link worked for me. Thanks — Mohan, Feb 06 '20 at 10:58

score 542 · Accepted Answer · edited May 10 '20 at 15:48

542

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.

edited May 10 '20 at 15:48

Eugene

4,352
8
55
79

answered Oct 28 '17 at 13:55

Fateh Mohamed

20,445
5
43
52

3

Hi.it is already in app.module.shared.ts and entryComponents is in app.module.server.ts – mrapi Oct 28 '17 at 14:02
4

if ConfirmComponent is in another module, you need to export it there thus you can use it outside, add : exports: [ ConfirmComponent ] in your app.module.shared.ts – Fateh Mohamed Oct 28 '17 at 14:06
1

it is the ng2-bootstrap-modal component from https://github.com/ankosoftware/ng2-bootstrap-modal/blob/master/README.md – mrapi Oct 28 '17 at 14:13
11

Thanks to all of you.!!!!!!!..putting all declarations and entryComponents in the same file app.module.shared.ts fixed the problem – mrapi Oct 28 '17 at 14:22
Please edit the content of comments into the answer. – DJClayworth Jan 04 '18 at 15:52
10

exports not working ... entryComponents option working for me !. – Raja Rama Mohan Thavalam Feb 22 '18 at 11:42
This solved my problem with `ng-bootstrap` and `NgModal` service using components. – Eric Liprandi Nov 09 '18 at 21:19
this solution help me again. i forget to add it to app.module. why it cant detect like ionic generate page command and prompt us – saber tabatabaee yazdi Dec 07 '18 at 05:08
entryComponents: [COMPONENTWITHISSUE] did it for me! – pmeyer Jun 27 '19 at 21:29
Mine is a lazy loaded module and `entryComponents` worked for me. – Jay Surya Nov 12 '19 at 11:34
1

my component which calls **ModalComponent** is a grandchild of a component. Neither adding the **ModalComponent** to `entryComponents` nor adding it to `exports` worked for me. **BUT** I can call the **ModalComponent** from some other components which are not grandchilds – canbax Nov 25 '19 at 06:14
I did in the specific module but it didn't work for me. in my case i have a lazy loading module that is : DashboardModule and i put the component in the entry components and in the declarations part but it throws the same error :( idk what is missing help me please – Muhammad Abdullah Dec 03 '19 at 11:33

score 157 · Answer 2 · edited May 08 '19 at 13:24

157

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

edited May 08 '19 at 13:24

Roy

7,811
4
24
47

answered Dec 05 '18 at 14:50

Ali Adravi

21,707
9
87
85

5

Thanks, I mean, THANKS!!! I was creating a dialog to enter data inside another component (The dialog has its component declaration inside the other component, and dialog.html for the layout) – Ramon Araujo Dec 09 '18 at 10:00
3

This did the trick for me and also has a better explanation than the chosen answer. Thank you! – Arsen Simonean Feb 23 '19 at 17:50
2

Clearly the best answer for me! – tuxy42 Feb 25 '19 at 21:51
1

This was the solution for me; I was creating a component on the fly and had everything in the correct modules but was still getting the error. Adding my created components to `entryComponents` was the solution - thank you! – Novastorm Sep 09 '19 at 14:24
3

my component which calls **ModalComponent** is a grandchild of a component. Neither adding the **ModalComponent** to `entryComponents` nor adding it to `exports` worked for me. **BUT** I can call the **ModalComponent** from some other components which are not grandchilds – canbax Nov 25 '19 at 06:15
@canbax I solved the same problem by using `imports:[..., ModalModule.forRoot()]` instead of `imports:[..., ModalModule]` in my app.module.ts – Moff452 Jan 20 '20 at 07:56
Mr Mohamed's answer might have been 'slightly' long winded, but nevertheless had everything you needed to know. – Kieran Ryan Apr 28 '21 at 13:55

score 67 · Answer 3 · edited Apr 16 '19 at 17:30

67

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.

edited Apr 16 '19 at 17:30

georg-un

1,123
13
24

answered Aug 13 '18 at 23:35

neox5

1,621
13
16

3

Problem specific to Angular 6. Fix the problem by adding your component to entryComponents in @NgModule @NgModule({ entryComponents:[ yourComponentName ] }) – DeanB_Develop Aug 28 '18 at 12:02
8

This can be fixed by removing `providedIn` and instead using the `providers` option on the module. – Knelis Sep 20 '18 at 12:04
Thanks for info, but it adding to @NgModule({ ... , entryComponents:[...] }) worked for me even with providedIn: "root" – Mykola Mykolayovich Dolynskyi Jan 20 '19 at 18:47
1

this seems related to https://github.com/angular/angular/issues/14324 it seems will be solved in Angular 9 – Paolo Sanchi Jan 02 '20 at 15:36
Exactly, especially in lazy-loaded module. To fix this, I specified NgModule.providers: [MyLazyLoadedModuleService] and changed MyLazyLoadedModuleService.providedIn from "root" to MyLazyLoadedmodule. – Howard Jan 16 '20 at 02:57

score 55 · Answer 4 · answered Jul 04 '18 at 09:07

55

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

answered Jul 04 '18 at 09:07

Alex Link

1,210
13
16

6

You saved me, cheers! This is definetely required when you try to open component in a modal. The error message is a bit misleading in this situation. – MÇT Aug 02 '18 at 18:26
Where do you import it from? – Mdomin45 Aug 23 '19 at 05:35
In my case changed import of NbDialogModule to NbDialogModule.forChild(null), – Maayan Hope Sep 07 '19 at 10:13
@Mdomin45 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'; – mpatel Sep 13 '19 at 19:16
This also helped me. Tried adding declarations and entry components to no luck. And yes, the error is misleading in this case. – Strategist Nov 29 '20 at 14:39
I did this on Angular 8 and I got a lot of errors after running the app. – napstercake Dec 06 '20 at 02:56

score 25 · Answer 5 · answered Oct 08 '18 at 10:45

25

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

entryComponents:[ConfirmComponent],

as well as Declarations:

declarations: [
    AppComponent,
    ConfirmComponent
]

answered Oct 08 '18 at 10:45

RohitAneja

966
12
15

Saved my day! Cheers mate – Sahan Serasinghe Sep 12 '19 at 02:50
my component which calls **ModalComponent** is a grandchild of a component. Neither adding the **ModalComponent** to `entryComponents` nor adding it to `exports` worked for me. **BUT** I can call the **ModalComponent** from some other components which are not grandchilds – canbax Nov 25 '19 at 06:23

score 15 · Answer 6 · answered Feb 05 '19 at 12:04

15

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

answered Feb 05 '19 at 12:04

MayankGaur

957
11
22

my component which calls **ModalComponent** is a grandchild of a component. Neither adding the **ModalComponent** to `entryComponents` nor adding it to `exports` worked for me. **BUT** I can call the **ModalComponent** from some other components which are not grandchilds – canbax Nov 25 '19 at 06:16
I need to re iterate this answer, if your component has been added to entryComponents already, and you're still experiencing the problem, make sure to check the modalComponent you're using and add it on the imports array! This saved my life! – Clyde Feb 26 '20 at 01:56

score 10 · Answer 7 · answered Dec 18 '18 at 13:46

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

score 8 · Answer 8 · answered Nov 24 '18 at 17:17

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

Chamila Maddumage · Answer 9 · 2020-01-07T04:35:53.200

8

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

edited Jan 07 '20 at 04:35

answered Jan 24 '19 at 08:36

Chamila Maddumage

3,304
2
32
43

score 8 · Answer 10 · answered Jan 31 '19 at 09:24

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

The component you want to load is not routing module
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.

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

score 7 · Answer 11 · answered Apr 04 '18 at 06:53

7

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

answered Apr 04 '18 at 06:53

Mohamathu Rafi

115
1
2

10

No, I don't think every component should be in a route. – Mcanic Sep 04 '18 at 12:52
Only the pages you want to display should be in routes. A page can use/display multiple components – Thibaud Lacan Jan 02 '19 at 16:43
every time you dont need to add component in to Route, such as modals. Place components which are created dynamically to entryComponents under @NgModuledecorator function. – CodeMind Sep 12 '19 at 06:05

score 7 · Answer 12 · answered Dec 19 '19 at 18:12

7

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

answered Dec 19 '19 at 18:12

f.khantsis

3,256
5
50
67

Dovev Hefetz · Answer 13 · 2019-01-07T07:53:13.133

3

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.

edited Jan 07 '19 at 07:53

answered Jan 06 '19 at 21:30

Dovev Hefetz

1,346
14
21

`error TS2339: Property 'forRoot' does not exist on type 'typeof NgbModule'.` using angular 8 – canbax Nov 25 '19 at 06:18

score 3 · Answer 14 · answered Jan 17 '19 at 08:58

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

score 3 · Answer 15 · answered Jan 17 '20 at 16:46

entryComponents is vital. Above answers on this are correct.

But...

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.

score 3 · Answer 16 · answered Apr 15 '20 at 13:28

3

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 {}

answered Apr 15 '20 at 13:28

Youness HARDI

402
1
3
13

Perfect for that bro the example url -- https://hassantariqblog.wordpress.com/2017/02/12/angular2-error-no-component-factory-found-did-you-add-it-to-ngmodule-entrycomponents/ – Juan Ignacio Liska Jun 17 '20 at 06:22

score 2 · Answer 17 · answered May 30 '19 at 12:24

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.

score 2 · Answer 18 · answered Jun 11 '19 at 21:06

2

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

answered Jun 11 '19 at 21:06

mgierw

73
2
8

score 2 · Answer 19 · answered Jul 29 '19 at 11:36

2

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

answered Jul 29 '19 at 11:36

JanBrus

1,198
9
13

score 2 · Answer 20 · answered Jun 28 '20 at 10:31

2

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

answered Jun 28 '20 at 10:31

kuldeep chopra

652
9
9

1

This fixed my issue. Thanks a lot! – Geeganage Punsara Prathibha Feb 27 '21 at 13:45

score 0 · Answer 21 · answered Dec 11 '19 at 12:17

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

score 0 · Answer 22 · edited Mar 15 '20 at 00:16

0

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)

edited Mar 15 '20 at 00:16

K. Frank

1,325
1
10
19

answered Mar 14 '20 at 16:25

upks praveen

25
4

score 0 · Answer 23 · answered Jul 14 '20 at 02:18

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.

score 0 · Answer 24 · answered Aug 05 '20 at 09:00

0

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

answered Aug 05 '20 at 09:00

Mojtaba Nava

858
7
17

Nitin Singhal · Answer 25 · 2021-02-05T11:38:54.640

-2

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.

edited Feb 05 '21 at 11:38

answered Nov 02 '20 at 12:19

Nitin Singhal

591
5
6

had to scroll too far for this, but this solves the issue! – Paul E. Stanciu Dec 28 '21 at 15:47
I get the error even without having `angularCompilerOptions` in tsconfig.json file. – Ionut Feb 17 '22 at 14:11

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

25 Answers25

Linked