Unable to open ModalController with lazy loading ionic

Ionic Framework ionic-v3
1

I’m implementing lazy loading in my ionic 3/angular5 app in order to boost performance. But I’m unable to open a modal using it and it drives me crazy. I have a page (Journal in red) where I load messages and display them (message-item in green). When the user click on it, it open the full message (MessageModal in blue) on a modal like below.

enter image description here

I created 3 separate modules for each of them. But I keep getting the following error after a tap on the button OPEN MESSAGE although I added the MessageModal to the message-item module :

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

So I tried to add the ModalMessage to entryComponents to each modules/components but it still doesn’t work and I’m really stuck.

JournalModule should need to import the MessageModule and MessageModalModule and MessageModule should add MessageModal to its entryComponents. Please find the code below :

journal.module.ts

@NgModule({
  declarations: [ JournalPage  ],
  imports: [
    MessageModalModule,
    MessageModule,
    IonicPageModule.forChild(JournalPage)
  ],
  providers: [JournalService], 
  exports: [JournalPage],
  entryComponents :[MessageModal]
})
export class JournalPageModule {}

Piece of journal.html

 <ion-list *ngIf="messages.length !=0 && messageLoaded == true">
          <message-item *ngFor="let message of messages" [message]="message"  (quizz)="handleQuizzResult($event)"  (delete)="deleteMessage($event)" (isRead)="messageRead($event)" ></message-item>
 </ion-list>

message.module.ts

@NgModule({
  declarations: [ MessageItem ],
  entryComponents : [MessageModal],
  imports: [ IonicPageModule.forChild(MessageItem)],
  exports : [MessageItem]
})
export class MessageModule {}

Piece of message.ts

@IonicPage()
@Component({
   selector: 'message-item',
   templateUrl: './message.html',
   entryComponents : [MessageModal]
})

...

let modal = this.modalCtrl.create( MessageModal, { message : this.message });

message-modal.module.ts

@NgModule({
  declarations: [ MessageModal ],
  imports: [ IonicPageModule.forChild(MessageModal)],
  exports : [MessageModal]
})
export class MessageModalModule {}

I don’t know where am i wrong… Any advices/docs appreciated !

2

I’m not sure about which piece of code is your modal and which piece of code isn’t…so here’s my code for a modal:

my-modal.ts

@IonicPage()
@Component({
   templateUrl: 'my-modal.html',
   selector: 'my-modal'
})
export class MyModal {
}

my-modal.module.ts

@NgModule({
declarations: [
    MyModal
],
imports: [
    IonicPageModule.forChild(MyModal)
]
})
export class MyModalModule {
}

that’s it, nothing more.

IMPORTANT to call your modal, don’t forget to not use the class name (which is probably your typing mistake according the code you display above) but to give the name of your class as a string

 let modal:Modal = this.modalController.create('MyModal'); // <-- Good
 let modal:Modal = this.modalController.create(MyModal); // <-- Bad for lazy loading
2 Likes
3

Blockquote let modal:Modal = this.modalController.create(‘MyModal’); // ← Good
let modal:Modal = this.modalController.create(MyModal); // ← Bad for lazy loading

Thank you very much!!!

1 Like