November 26, 2017

How To Use Custom Component Using Lazy Loading In Ionic3

Lazy loading in Ionicframework

One of new thing on Ionic3 is lazy loading. You can read it from their blog on how to move into lazy loading approach.

But, what is lazy loading anyway? Lazy loading is simply mean, we are loading needed part when only necessary. By doing this, we can reduce small portion of the script being load by our application. Other than that, by lazy loading, the application code are much cleaner – this is by experience, i rewrote my app from non-lazy loading to lazy loading, it look much cooler now.

How To Use Custom Component And Lazy Loading It In Our Application

The problem i encounter when try lazy load everything, is only happen when i try lazy load the custom component i made. Of course I try to google it, however I didn’t find any article or documentation on how to solve it, therefore hopefully by writing this post it  will somehow help other people that have the same problem.

For this example, i’m gonna use my own customized Ionicframework template sample. This template was based on side menu template from ionic, i just modify it to use lazy load as default. You can read much more explanation on my github.

Clone the project first.
$ git clone custom-component-lazyload

Change directory to the project
$ cd custom-component-lazyload

Download the dependencies by serving the app
$ ionic serve

Now, stop the app, and create new custom component, let call this as app-name component. This component will show the name of the app and can be reuse on every page.
$ ionic g component app-name

Alright to load this custom component, to our page – let say the page is HomePage. Open the home.module.ts file, and import the ComponentsModule at the top.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
//add this line
import { ComponentsModule } from '../../components/components.module';
declarations: [
imports: [
//add this line too
export class HomePageModule {}
view raw home.module.ts hosted with ❤ by GitHub

Later on we can use the component in the HomePage html template. We will use app-name component inside our ion-content

<!-- custom-component-lazyload\src\pages\home\home.html -->
<button ion-button icon-only start menuToggle><ion-icon name="menu"></ion-icon></button>
<ion-content padding>
<!-- we add our app-name component here -->
<h3>Ionic Menu Starter</h3>
If you get lost, the <a href="">docs</a> will show you the way.
<button ion-button secondary menuToggle>Toggle Menu</button>
By using lazy loading, you didnt have to import the page on the Typscript file
<button ion-button secondary (click)="goToListPage()">Go To Page List</button>
view raw home.html hosted with ❤ by GitHub

Then run our app again by using ionic serve command, now we should be able to see ‘Hello World’ text below our Navbar.

Later on we can create more custom component and it will automatically load by our HomePage. If we want to add this custom component to other page, just repeat above step and replace the page module to the page we want to load the custom component.

The full source code for the example can be download here. Thanks for reading!


Hamzah Jamad

I write codes.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.