Ionic 4 Lazy Loading and Modals

Ionic Framework
36

I found it difficult to navigate all these notes and other threads so chiming in with my simplified two cents. I “think” btsiders (above) got this right and I’m just simplifying those notes for my use case.

  1. Create a standard Ionic page (this will be the modal page)
  2. Modify the new modal page module.ts
  3. Import this module.ts on pages that will display the modal.

  1. Create modal page: ionic generate page my-modal

  2. Modify the modal page module.ts as follows i.e. remove router and add entryComponents:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
//import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MyModalPage } from './my-modal.page';

/*
const routes: Routes = [
    {
        path: '',
        component: MyModalPage
    }
];
*/

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        //RouterModule.forChild(routes),
    ],
    declarations: [MyModalPage],
    entryComponents: [MyModalPage]
})
export class MyModalPageModule { }
  1. Import the module.ts on page that will display the modal:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MyPage } from './my-page.page';

import { MyModalModule } from '../my-modal.module';

const routes: Routes = [
    {
        path: '',
        component: MyPage
    }
];

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes),
        MyModalModule
    ],
    declarations: [MyPage]
})
export class MyPageModule { }
4 Likes