Damir's Corner.

Lazy Loaded Modal Pages in Ionic

Modal pages in Ionic are very similar to regular pages. They only differ in how they are displayed:

• Regular pages are pushed onto the stack using the NavController:

    this.navCtrl.push(RegularPage);
  

• Modal pages are created using the ModalController and then presented:

    let modal = this.modalCtrl.create(ModalPage);
    modal.present();
  

When using lazy loading, instead of the page type, its name is passed as a string, both for regular pages:

this.navCtrl.push('RegularPage');

and for modal pages:

let modal = this.modalCtrl.create('ModalPage');
modal.present();

If you forget to replace a type reference during the migration from old style application with all pages in a single module to lazy loaded pages, the following error will be thrown:

Error: No component factory found for ModalPage. Did you add it to @NgModule.entryComponents?

Adding the page to entryComponents collection of AppModule was the solution for this issue when all pages were in that module. With lazy loading and each page in its own module, it doesn't help, no matter which module you add it to. The issue can only be solved by passing the page name instead of page type to the controller.

To speed up load times when a page is opened for the first time, module preloading can be enabled in AppModules's @NgModule declaration:

IonicModule.forRoot(MyApp, { preloadModules: true })

Curiously enough, with preloading enabled, there will be no error when opening a modal page even if its type is used instead of the name, as long as its module was already preloaded at that time. If such a page is not opened immediately after the application start, this might hide the issue of incorrect usage when it is first introduced. It will only show up if you disable the preloading at some time in the future. Troubleshooting the issue then will be much more difficult.

Just remember: if you're using lazy loading, you always need to refer to pages (regular and modal) with their name. The above error will be thrown when you fail to do so. To fix it, just replace the page type with its name.