Error: No component factory found for 'Component'. Did you add it to @NgModule.entryComponents?

Ionic Framework ionic-v3
1

Hi,

I’ve created a component named ContextMenuComponent that will open a popover when a button is clicked. I created another component for the popover, named ContextMenuPopoverComponent. Both files are in the same folder.

I have a module where I list all the components for my app: src/components/components.module.ts. I have declared both components in there:

import { ContextMenuComponent } from './context-menu/context-menu';
import { ContextMenuPopoverComponent } from './context-menu/context-menu-popover';

@NgModule({
    declarations: [
        ContextMenuComponent,
        ContextMenuPopoverComponent
    ],
    entryComponents: [
        ContextMenuPopoverComponent
    ],
    imports: [
        IonicModule
    ],
    exports: [
        ContextMenuComponent
    ]
})
export class ComponentsModule {}

I’m using this ContextMenuComponent in a page that’s lazy loaded. This is the module of the page:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MyOverviewPage } from './my-overview';
import { ComponentsModule } from '../../../../components/components.module';

@NgModule({
    declarations: [
        MyOverviewPage,
    ],
    imports: [
        ComponentsModule,
        IonicPageModule.forChild(MyOverviewPage)
    ],
})
export class MyOverviewPageModule {}

And this is what I do in ContextMenuComponent to open the popover:

import { PopoverController, Popover } from 'ionic-angular';
import { CoreContextMenuPopoverComponent } from './context-menu-popover';

...

    showContextMenu(event: Event) : void {
        this.popover = this.popoverCtrl.create(CoreContextMenuPopoverComponent);
        this.popover.present({
            ev: event
        });
    }

When I click on the button, I get the following error:

Error: No component factory found for ContextMenuPopoverComponent. Did you add it to @NgModule.entryComponents?

The popover component IS in entryComponents, so I don’t understand why the error is thrown. Is it because the page is lazy loaded? How can I fix it?

Thanks!

1 Like
2

Hello pxdev, looks like it’s an linux issue, not ionic.

To me it’s the last part of your code who make the crash.
*
Try commenting this, to make sure it’s where the bug come from, from me it’s pretty clear.

import { PopoverController, Popover } from ‘ionic-angular’;
import { CoreContextMenuPopoverComponent } from ‘./context-menu-popover’;

…

showContextMenu(event: Event) : void {
    this.popover = this.popoverCtrl.create(CoreContextMenuPopoverComponent);
    this.popover.present({
        ev: event
    });
}
3

I was testing some things and I was able to make it work by importing the CoreComponentsModule in my AppModule (src/app/app.module.ts):

import { CoreComponentsModule } from '../components/components.module';

...
imports: [
    CoreComponentsModule

I tried removing the import of CoreComponentsModule from the page’s module because now I’m importing it in the app’s module, but if I remove it then my app stops working.

Is it ok to import the components module both in the app and in the page? Should I do it different?

2 Likes
4

Hi @pxdev

remove ContextMenuPopoverComponent in app.module.ts

remove from declarations and entryComponents

only try below code

showContextMenu(event: Event) : void {
        this.popover = this.popoverCtrl.create('CoreContextMenuPopoverComponent');
        this.popover.present({
            ev: event
        });
    }
5

Thanks addwebsolution,

in order for this to work I think I should declare the popover as a IonicPage and create a module to lazy load it. I was trying to make it work without the lazy load :slight_smile:

1 Like
6

Don’t declare any components as entryComponents. Declaring them imperatively like that defeats lazy loading, because you need to eagerly provide a factory for them somewhere.

7

Even though it’s an old post, this may be helpful for any person encountering the same problem, as I just did.

I found an explanation here why in this case you need to import the component’s module in the app module. Basically, if you need to navigate to the component, e.g. as part of a popover or modal, you need to import the component in the app module and also declare it as entryComponents either in the app module or component module.

Note: It shouldn’t be necessary to import the component’s module also in the page’s module as you say, it should be enough to import it in the app module.
Also, AaronSterling’s comment that you shouldn’t declare the component as entryComponents doesn’t seem correct in this case. It didn’t work for me without declaring it as entryComponent.

2 Likes
8

Thanks! Finally a Solution that works in this big polluted sea of internet :wink:

9

By the way, as explained here under ‘Important Note’, you may not even need to create a module for your component, which also means that you could get rid of importing your component’s module in the app module. You would just include the component in the declarations and entryComponents sections of the module of the page that uses the component.

This works for me in a new Ionic 4 project I’ve created, but not in an Ionic 3 project. I guess it depends on the Ionic / Angular version you use.

10

Following should be the structure of the page after popover,named as MoreOptionsComponent,creation:@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: ‘’, component: Tab2Page },{path: ‘’, component: MoreOptionsComponent}])
],
declarations: [Tab2Page, ScrollableDirective, LoadingSpinnerComponent,MoreOptionsComponent],
entryComponents:[Tab2Page,]
})strong text