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


#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!


#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?


#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:


#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.