Ionic 3.0.1: Pop-over not working

Error Message: main.js:22664 PopoverCmp ionViewPreLoad error: No component factory found for OtherDiariesPopoverControlComponent. Did you add it to @NgModule.entryComponents?

Code

@IonicPage()
@Component({
    template: `<ion-list *ngIf="diaries">
    <ion-list-header>Switch to another avatar</ion-list-header>
    <button *ngFor="let diary of diaries" ion-item (click)="onClose()">
        {{diary.avatarURL}}
    </button>
</ion-list>`
})

export class OtherPopoverControlComponent implements OnInit {

    private diaries: any;

    constructor(
        private nav: NavController,
        private loadingCtrl: LoadingController,
        private navParams: NavParams,
        private viewCtrl: ViewController) {

    }

    /**
     * Page init event.
     */
    ngOnInit() {
        super.onInit();
        if (this.navParams.data) {
            this.diaries = this.navParams.data.diaries;
        }
    }

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

@IonicPage()
@Component({
    selector: 'control-avatar',
    template: `<button ion-button item-left icon-right (click)="presentPopover($event)"></button>`
})

export class AvatarControlComponent implements OnInit, OnDestroy {

    @Input()
    personPhotoURL: string;

    
    private diaries: Array<any>;

    constructor(
        public popoverCtrl: PopoverController,
        private nav: NavController,
        private loadingCtrl: LoadingController,
        private navParams: NavParams
    ) {

        this.diaries = new Array<any>();
    }

    ngOnInit() {
    }

    ngOnDestroy() {
    }

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

    presentPopover(myEvent) {
        let popover = this.popoverCtrl.create(OtherPopoverControlComponent, {
            diaries: this.diaries
        });
        popover.present({
            ev: myEvent
        });
    }
}

Please help!!!

1 Like

Did you imported your page to app.module.ts? If no, please add.

Importing to app.module.ts is not required in Ionic 3.

If you notice @IonicPage() directive above @Component() declaration. This helps in dynamic loading. Every component has a module.ts file.

avatar.component.module.ts


// Component Imports
import { AvatarControlComponent } from './avatar.component';

@NgModule({
  declarations: [
    AvatarControlComponent,
    OtherPopoverControlComponent
  ],
  imports: [
    ControlsModule,
    IonicPageModule.forChild(AvatarControlComponent)
  ],
  exports: [
    DiaryControlComponent,
    OtherPopoverControlComponent
  ]
})
export class AvatarControlComponentModule { }

other-popover.component.module.ts

// Component Imports
import { OtherPopoverControlComponent } from './other-popover.component';

@NgModule({
  declarations: [
    OtherPopoverControlComponent
  ],
  imports: [
    ControlsModule,
    IonicPageModule.forChild(OtherPopoverControlComponent)
  ],
  exports: [
    OtherPopoverControlComponent
  ]
})
export class OtherPopoverControlComponentModule { }

if you use the lazy loading , i think you have to pass a string value instead off the component,
so try

let popover = this.popoverCtrl.create(ā€œOtherPopoverControlComponentā€, {
diaries: this.diaries
});

also, in the other-popover.component.module.ts you need to

import { IonicPageModule } from ā€˜ionic-angularā€™;

Yup, ā€œOtherPopoverControlComponentā€ worked. Obviously, a silly mistake at my end.

Thanks Saidorel

I think someone should file a ticket to document that Modals should be decorated with IonicPage if they are going to be lazy loaded.

Ionic does not treat modal components any differently than Pages when it come to lazy loading but they have failed to put concrete examples in their example apps.