How do you use Popovercontroller?

Ionic Framework ionic-v3
1

Ok, I’m currently using Ionic 4.

I’m calling the controller as below,

  async onAdditionalEvidenceSelected({event}) {
    const popover = await this.popoverCtrl.create({
      component: "PopupMenu",
      ev: event,
      translucent: true
    });
    return await popover.present();
  }

I’ve created a component and imported the shared module in App, and the Page, neither work.

import { PopupMenuComponentModule } from '../../components/popup-menu/popup-menu.module';

It complains that it wants to be an entry component,

Error: Uncaught (in promise): Error: No component factory found for PopupMenuPage. Did you add it to @NgModule.entryComponents?

So I tried adding it as an entry component,

PopupMenuPageModule cannot be used as an entry component.
Error: PopupMenuPageModule cannot be used as an entry component.

I’ve read that it can’t be used as a component and must be an Ionic Page (https://github.com/ionic-team/ionic/issues/11111) but that won’t work either.

import { PopupMenuPageModule } from './../popup-menu/popup-menu.module';

I’m tearing out what little hair I have left, ha

Any help appreciated.

Thanks

2

Hi @Dunny!

The error message you received is really not helpful, but indicates that your Popover component is being loaded dynamically using a Component Factory under the hood, but things are not resolving correctly. The Ionic 4 documentation (as of the time of this post) doesn’t explain that in order to get things working you’ll need to make the Angular Router aware of your component by adding it to the routing configuration.

So, for your component, you’ll want to add something like the following, e.g., for a lazy loaded route:

const routes: Routes = [
	{
		path: '', 
		component: RootLazyLoadedPage,
		children: [
			{
				path: 'your-popover',
				component: PopMenuComponent
			},
		]
	}
];

Once you do that, the easiest way to create your popup is to use a direct reference to the PopMenu component rather than a string format, so you’ll want to change your example above to something like:

const popover = await this.popoverCtrl.create({
	component: PopupMenu,
	ev: event,
	translucent: true
});

Note the change from "PopupMenu" to PopupMenu (no quotes). That should get it working for you.

Hope this helps anyone else who’s been suffering from this documentation-related issue!