Angular - Ionic - Cannot create a popover, component injection error

Question

I am trying to show a Popover using Ionic Framework v3, I have a ionic page that contains a list component, in this list I have a button that will show a popover. So i have declared my popover component in the parent page and i have create an event emitter in the list that will send to the parent the toggle information.

But i've got the given error :

No component factory found for PopoverComponent. Did you add it to @NgModule.entryComponents?

Code of the page module :

@NgModule({
    declarations: [
        PopoverComponent
    ],
    imports: [
        IonicPageModule.forChild(MyCustomPage),
    ],
    entryComponents: [
        PopoverComponent
    ]
})
export class MyCustomModule {}

Code of the page :

@Component({
    selector: 'my-custom-page',
    templateUrl: 'my-custom-page.html'
})
export class MyCustomPage {

    public constructor(public popoverCtrl: PopoverController) { }

    public toggleFilters() {
        const popover = this.popoverCtrl.create(PopoverComponent);
        popover.present();
    }
}

template of the page :

<my-custom-list (onFilterToggle)="toggleFilters()"></my-custom-list>

Component list :

 @Component({
    selector: 'my-custom-list',
    templateUrl: 'my-custom-list.component.html'
 })
 export class MyCustomListComponent {

     @Output() onFilterToggle: EventEmitter<void> = new EventEmitter<void>();
     public showFilters() {
         this.onFilterToggle.emit();
     }
 }

Component template :

 <button (click)="showFilters()">Test</button>

Popover code :

@Component({
    selector: 'my-popover',
    template: '<p>Test</p>'
})
export class PopoverComponent {

    constructor(public viewCtrl: ViewController) {}

    close() {
        this.viewCtrl.dismiss();
    } 
}

I've got a shared module that is loaded in all my pages, i've tried to add it in here but still the same error, i've tried to add it to entryComponents in the list component, in the app module and still the same error.

If anybody have an idea.

Julien METRAL · Accepted Answer · 2018-05-18 15:08:49Z

2

So, I found a solution, just add IonicPage decorator to the popover component. Create a module that declares the component and remove declarations and entrycomponents. Don't load the module in another module, Ionic will done it. So the code for the popover would be :

@IonicPage({
    name: 'my-popover'
})
@Component({
    selector: 'my-popover',
    template: '<p>Test</p>'
})
export class PopoverComponent {

    constructor(public viewCtrl: ViewController) {}

    close() {
        this.viewCtrl.dismiss();
    } 
}

and the module will be :

import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';
import {IonicPageModule} from 'ionic-angular';
import {PopoverComponent} from './components';

@NgModule({
    declarations: [
        PopoverComponent
    ],
    imports: [
        IonicPageModule.forChild(PopoverComponent)
    ],
    exports: [
        PopoverComponent
    ]
})
export class MyPopoverModule {}

To call the popover, just use the name of the page like that :

this.popoverCtrl.create('my-popover');

answered May 18, 2018 at 15:08

Julien METRAL

1,98416 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pradnya Sinalkar Over a year ago

Is PopoverComponent have a module? Is component created using ionic page generator?

Collectives™ on Stack Overflow

Angular - Ionic - Cannot create a popover, component injection error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related