Ionic Lazy Loading

Ionic 3 introduce lazy loading, it improves performance. No longer have to import the page and reference component in NavController..

Generate new Page about and remove old homepage
ionic g page About
ionic g page Home

Step 1: We will get an error in app.component.ts, For lazy loading we don’t need to import the page, instead, we can use a string as follow.

Remove : import { HomePage } from ‘../pages/home/home’;

Change:  rootPage:any = HomePage; to rootPage:any = “Home”;

Step 2: We no longer declaring our the page at a runtime inside of the modules, instead we are loading when we require. So no need to define in app.module.ts. Remove all the declare page. In our case remove home page declaration.

Step 4: Home.html

<button>Navigate</button>

In home.ts, we need to add the function for the button and pass the page name just as string Nothing more, lazy loading will handle it for us.

navigateToAboutPage(){
  this.navCtrl.push("About");
}

Creating second Apps for lazy loading with Tab template. First remove all the page import from the app.module and app.component. Change app.component.ts code from
rootPage:any = TabsPage; change to string
rootPage:any = ‘TabsPage’;

Step 2: In tabs folder add tabs.module.ts file and remove all the page import from the tabs and change reference page to string in tabs.ts
From
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;

TO
tab1Root = ‘HomePage’;
tab2Root = ‘AboutPage’;
tab3Root = ‘ContactPage’;

Step 3: Add about.module.ts and same for all other pages. Add the following code inside each file and change all the name of page. For contact.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactPage } from './contact';
 
@NgModule({
  declarations: [
    ContactPage,
  ],
  imports: [
    IonicPageModule.forChild(ContactPage),
  ],
  exports: [
    ContactPage
  ]
})
export class ContactModule {}