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.

Answer 1

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');