Ionic

Lazy loading in Ionic

Today we will see how to use lazy loading in Ionic app. For this we will create a simple login page and landing page with side menu.

When your app contains lot of pages, directives and pipes; then in this condition you should consider lazy loading components to boost up loading time

The advantage of lazy loading is:-

  • Easier separation and encapsulation

Wrap all you app’s custom components and pipes into different modules.

  • By this technique every component of your app is available in own-self contained module.
  • And the main thing is it Boosts performance of app.

Now following sample code is using lazy loading components, let’s have a review.

Step 1

Create new app in ionic3 by ionic start LazyLoadingSample sidemenu –v3. It will create default Home Page and ListPage. Now open src/app/app.module.ts

Step 2

In app.module.ts file you can see default NgModule and also can see that we are importing Myapp , HomePage and ListPage component in NgModule and entryComponents like this

import { BrowserModule } from '@angular/platform-browser';

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

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({

declarations: [

MyApp,

HomePage,

ListPage

],

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

],

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

ListPage

],

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Step 3

Now we add new page “Login” with command ionic generate page login

Step 4

After adding this page you can open login page folder you will see four files in that folder. “login.module.ts” file is one extra file which is not in “Home” and “List” page folder.

Step 5

Login page has its own module.ts file and imported “IonicPageModule” in that file.

This import will provide everything you already declared on app.module.ts. So this is the lazy loaded page.

For navigating from any other page to login page we just write this

rootPage: any = 'LoginPage';

No need to import.

Step 6

Now, to make “HomePage” as lazy loaded page open app.module.ts file and remove imported “HomePage” component from “app.module.ts” file.

 Note: – On importing any page in NgModule of app.module.ts then it is available in global whether it’s in use or not use in app so it will decrease the app’s performance.

Step 7

Lets create new file in src/pages/home/home.module.ts to make HomePage lazy loaded.

Step 8

open the home.module.ts file then import you Home page in home page’s own self contained module.ts file like the below code.

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

import { IonicPageModule } from 'ionic-angular';

import { HomePage } from './home';

@NgModule({

declarations: [

HomePage,

],

imports: [

IonicPageModule.forChild(HomePage),

],

})

export class HomePageModule {}

Step 9

Now open home.ts file add @IonicPage()  before @Component(… )

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

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

@IonicPage()

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

}

Step 10

@IonicPage()  has a few options . By adding this we can use Home page when we want to navigate this component from any other page like this

rootPage:any = 'HomePage';   // or

this.navCtrl.push('HomePage');

Step 11

In this code Home page is opening after login success.

Step 12

Same as that you can also make “ListPage” as lazy loaded. You can download this sample code from Git here.

So that’s it. This is lazy loading which improve app’s performance and decrease loading time. For other performance related tips please check out my other article here

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top