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 https://github.com/hamzahjamad/ionic-angular-sidemenu-lazyloading.git 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.
| //custom-component-lazyload\src\pages\home\home.module.ts | |
| import { NgModule } from '@angular/core'; | |
| import { IonicPageModule } from 'ionic-angular'; | |
| import { HomePage } from './home'; | |
| //add this line | |
| import { ComponentsModule } from '../../components/components.module'; | |
| @NgModule({ | |
| declarations: [ | |
| HomePage, | |
| ], | |
| imports: [ | |
| //add this line too | |
| ComponentsModule, | |
| IonicPageModule.forChild(HomePage), | |
| ], | |
| }) | |
| export class HomePageModule {} |
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 --> | |
| <ion-header> | |
| <ion-navbar> | |
| <button ion-button icon-only start menuToggle><ion-icon name="menu"></ion-icon></button> | |
| <ion-title>Home</ion-title> | |
| </ion-navbar> | |
| </ion-header> | |
| <ion-content padding> | |
| <!-- we add our app-name component here --> | |
| <app-name></app-name> | |
| <h3>Ionic Menu Starter</h3> | |
| <p> | |
| If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way. | |
| </p> | |
| <button ion-button secondary menuToggle>Toggle Menu</button> | |
| <p> | |
| By using lazy loading, you didnt have to import the page on the Typscript file | |
| </p> | |
| <button ion-button secondary (click)="goToListPage()">Go To Page List</button> | |
| </ion-content> |
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!
