ionic-framework: Popover does not work for NgModules, ionic3 and lazy-loading IonicPage

Ionic version: (check one with “x”) [ ] 1.x [ ] 2.x [x] 3.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: We have a simple ionic3 app with lazyloading and IonicPage, we want to load a PopoverPage but this is not working. I get this error: view-controller.js:570 PopoverCmp ionViewPreLoad error: No component factory found for PopoverPage. Did you add it to @NgModule.entryComponents? I don’t know if this is a inoic3 or a problem with lazyloading or perhapse I’m doing something wronk 😄

Expected behavior: It should work 😄

Related code:

@NgModule({
    imports: [ IonicModule, IonicPageModule.forChild(HomePage) ],
    declarations: [ HomePage, PopoverPage ],
    entryComponents: [
        HomePage, PopoverPage
    ]
})
export class HomePageModule { }


import { Component } from '@angular/core';
import { NavController, IonicPage, PopoverController } from 'ionic-angular';

@IonicPage()
@Component({
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public popoverCtrl: PopoverController) {}

   presentPopover(ev) {
       let popover = this.popoverCtrl.create(PopoverPage);
       popover.present();
  }
}


@Component({
  template: `
    <ion-list>
            <button ion-item>A</button>
            <button ion-item>B</button>
            <button ion-item>C</button>
        </ion-list>
  `
})
export class PopoverPage {
  constructor() {}
}

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
    Ionic Framework Version: 3.0.1
    Ionic CLI Version: 3.0.0-beta.5
    ios-deploy version: Not installed
    ios-sim version: Not installed
    OS: Linux 4.8
    Node Version: v6.10.2
    Xcode version: Not installed

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 19 (7 by maintainers)

Most upvoted comments

Put the Popover page in it’s own NgModule and give it an @IonicPage decorator. It’ll work. It is sort of confusing since a popover isn’t a page. We are going to address this in a future release.

Thanks, Dan

+15

danbucholtz on Apr 7, 2017

It’s working for me but I have to put component name as a string for lazy loading. presentPopover(ev) { let popover = this.popoverCtrl.create('ContactsPopoverComponent', {}); popover.present({ ev: ev }); }

lyczos on May 26, 2017

Hi @danbucholtz Doing this it will work, but there are also other problems!

home/abc/ionic3-content/src/pages/home/popover/popover.component.ts has a 
@IonicPage decorator, but it does not have a corresponding "NgModule" at 
/home/abc/ionic3-content/src/pages/home/popover/popover.component.module.ts

My file structure is

popover.component.ts
popover.module.ts
popover.html

In this case and only in this case I’m forced to name the module also popover.component.module.ts. I think this is not standard NgModule and also I think this is not necessarie for other IonicPage components? Right?

mburger81 on Apr 7, 2017

Also I use a ModalController in Popover to change settings, this has the same problem! I have also to create a new NgModule with a new IonicPage to get it work. This is very stranged and not very usable. I would create one Module for my PopoverPage where I declare all my Modal Pages, and not create one Module per ModalPage. It’s not very usable and I think if we have to do this, you should document this @brandyscarney @mhartington

mburger81 on Apr 7, 2017