Drive Through Lazy Loading in Ionic 3 with Angular 4

Recently while I was doing a project with ionic framework + angular I found that my application takes too much time to startup. So I did some research to find a way to avoid this and found out about lazy loading.

Lazy loading is a technique used in angular that allows to load components and modules asynchronously on demand. This helps to decrease the startup time. With this the application doesn't need to load everything in the startup or at once. On startup it loads only the part that the user expects to see and this saves the time it takes to load unnecessary modules or components. Modules that are lazily loaded will only be loaded when the user expects to see them or navigates to them. Purpose of this article is to define a simple module that will demonstrate a lazy loading component.

Create a new ionic App

First create a new blank ionic app from the CLI.

$ ionic start myApp blank
Then open the project folder with your favorite text editor.So our default NgModule will be like this:

Here as you can see  here we import MyApp  and HomePage components. lets remove  HomePage component and use lazy loading to load it when we need. So we don't need to reference it in declarations and in entryComponents. 

To make HomePage lazy loadeded we can create it's own NgModule. There are two ways to do that.

 1) create a new file in src/pages/home/ called  home.module.ts and then paste the code below:

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { HomePage } from './home';

@NgModule({

declarations: [

HomePage,

],

imports: [

IonicPageModule.forChild(HomePage),

],

})

export class HomePageModule {}

2)When we create a new app the default home page is there and inside src/pages/home there are three files: home.html, home.scss and home.ts. Remove the  home inside src/pages/ folder. Then we have to generate a new page with command line:

$ ionic g page home

When we generate a new page  home.module.ts  is already included. Now there are 4 files inside home folder.

Now if we look inside  home.module.ts  we are importing IonicPageModule which tells ionic what should load or provide for the page. When we look inside home.ts file it's little bit different now.

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()

@Component({

selector: 'page-home',

templateUrl: 'home.html',

})

export class HomePage {

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad HomePage');

}

}

The @IonicPage decorator is how Ionic generates the proper mappings for our app at build time.

Now when we want to navigate to this home page we don't have to reference the class directly. We can add just the HomePage string and navigate to this component.
Now we have gone through the process of lazy loading our home page.By following these kind of techniques performance of the app will increase and users will have a much better experience.

Demo