Ionic 5/Angular – Lazy Loading Modules

Ionic 5/Angular – Lazy Loading Modules

In this post we will give you information about Ionic 5/Angular – Lazy Loading Modules. Hear we will give you detail about Ionic 5/Angular – Lazy Loading ModulesAnd how to use it also give you demo for it if it is necessary.

Lazy loading refers to the process of loading chunks of code (such as a component, directive or pipe) when it’s requested not when the app is loading. The most obvious benefit of lazing loading is the increased performance especially when the app is starting.

Create an Ionic 5/Angular Project with Lazy Loading

To demonstrate how we can lazy load a component or page, let’s create a new Ionic 5 project based on Angular and the blank template:

ionic start lazy-loading-demo blank 

Navigate inside the project directory and open it with your prefered IDE/Code Editor. We are using Visual Studio Code:

code .

Open the src/app/app.module.ts file:

@NgModule({declarations: [    MyApp,    HomePage      ],imports: [    BrowserModule,    IonicModule.forRoot(MyApp)],bootstrap: [IonicApp],entryComponents: [    MyApp,    HomePage],providers: [    StatusBar,    SplashScreen,    {provide: ErrorHandler, useClass: IonicErrorHandler}]})export class AppModule {}

You can see, there are two components in the declarations and entryComponents arrays. This means that we are importing two components into our module.

See also  PHP - Calculate experience in months, years and days from two given dates

Lazy Loading the Ionic 5/Angular Component

Now let’s lazy load the HomePage component so it can be loaded only when it’s requested.

First of all, remove all references to HomePage from our app module including the import statement.

Next, we need to give HomePage its own NgModule, so create a new file src/pages/home/home.module.ts:

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

Note: You can also just remove home page and re-generate it using the CLI: ionic g page HomePage

A new page with its own NgModule will be generated.

Next add @IonicPage() decorator to HomePage:

import { IonicPage } from 'ionic-angular';@IonicPage()@Component({selector: 'page-home',templateUrl: 'home.html'})export class HomePage {

The last thing you need to do to lazy load HomePage page is going to src/app/app.component.ts.

Remove the import statement of HomePage, then remove the reference to HomePage and replace it with the string containing name of the page i.e ‘HomePage’:

export class MyApp {rootPage:any = 'HomePage';


So we have seen the process of lazy loading a component in your Ionic 5/Angular app which is simply creating an NgModule for it and decorate it with an IonicPage decorator, then reference it by a string of its name.

See also  How To Replace Some Characters With Asterisks in PHP

Hope this code and post will helped you for implement Ionic 5/Angular – Lazy Loading Modules. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US