ionViewPreLoad error: No component factory found

Ionic Framework ionic-v3
1

Hi i am making popover in ionic 2.

But getting error
" PopoverCmp ionViewPreLoad error: No component factory found for PopoverPage "

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { SqliteUserListPage } from '../pages/sqlite-user-list/sqlite-user-list';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SqliteUserListPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SqliteUserListPage,
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

sqlite-user-list.html

<ion-header>
  <ion-navbar>
    <button ion-button icon-only menuToggle >
      <ion-icon  name="menu"></ion-icon>
    </button>
    <ion-title>sqlite-user-list</ion-title>
    <ion-buttons right>
      <button ion-button icon-only (click)="go_to_user_add_page()">
          <ion-icon name="add-circle"></ion-icon>
      </button>
      <button ion-button icon-only (click)="presentPopover($event)">
          <ion-icon name="md-more"></ion-icon>
      </button>
  </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>

sqlite-user-list.ts

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


@Component({
  template: `
    <ion-list>
      <ion-list-header>Option</ion-list-header>
      <button ion-button ion-item (click)="loadc('refresh')">Refresh</button>
      <button ion-button ion-item (click)="loadc('deleteall')">Delete All</button>
    </ion-list>
  `
})
class PopoverPage {
  callback:any;
  constructor(private viewCtrl: ViewController,private params: NavParams) {
    this.callback = this.params.get('callback')
  }

 	loadc(x) {
	  this.callback(x)
	  this.viewCtrl.dismiss();
	}
  
}


@Component({
  selector: 'page-sqlite-user-list',
  templateUrl: 'sqlite-user-list.html'
})
export class SqliteUserListPage {

  constructor(private popoverCtrl: PopoverController,public navCtrl: NavController) {}

  ionViewDidLoad() {
    console.log('Hello SqliteUserListPage Page');
  }

   presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(PopoverPage,{
      callback: (data) => { }
    });
    popover.present({
      ev: myEvent
    });
  }

}
1 Like
2

Try to add PopoverPage to app.module.ts:

import { SqliteUserListPage, PopoverPage } from '../pages/sqlite-user-list/sqlite-user-list';

also to both “declarations” and “entryComponents” arrays

1 Like
3

when i done that getting another error

f:/ionic/tutorials/ionic2/test1/src/pages/sqlite-user-list/sqlite-user-list"' has no exported member 'PopoverPage'.

4

You also need to add “export” to your popover class definition

export class PopoverPage

See this example

I personally prefer to separate the popover class and template in its own file and import it in the parent page

good luck!

2 Likes
5

Thank you now it is working