Lazy Loading of Feature Module in Angular 7

whenever angular application is loaded then its all modules are loaded eagerly i.e entire application is loaded at client side on first request made to server. This cause over utilization of the resources and slows down the application at least at first time.

Just take example for E-commerce website which will have several module like order module, Feedback module, Cart Module, Product module and etc. But suppose your require to give feedback for some product you have bought and you visited to feedback page but now instead of loading just
feedback module application starts loading all other module which are not required by you. And surely if the application is big then it is going to take lot of time to load and surely this is very bad user experience and you are not going to give any feedback. Here Lazy loading comes for rescue.

Lazy loading for Feature Module

In this your feature module is loaded only when you requires it. I.e whenever a request is made for for first time for specific module like feedback module then only that requested module is loaded instead of entire application. And second time when you make request to same module then it does not get loaded from server as its already loaded.

Lets convert our features module created in previous post about feature module to lazy loading feature module.

Here we will see Bus Booking app that will deal with two module

Reservation Module
Passenger Module

We will follow several steps to achieve lazy loading for our module.

We will create a routing module for both App, Passenger and Reservation Module.
Remove the imports of Reservation module from import array of App.module.ts.
Add routes to Passenger and Reservation Module to app-routing.module.ts you created in second step.

Step 1 : Adding routing module to App, Passenger and Reservation module

Create app-routing.module.ts to app module i.e app folder of your project and add below code.

Create reservation-routing.module.ts to your Reservation module i.e app/reservation folder. and add below code.

Create passenger-routing.module.ts to your Passenger module i.e app/passenger folder. and add below code.

Now your folder structure will be look something like this.

Step 2 : Remove the imports of Reservation module from import array of App.module.ts.

After removing your imports form app.module.ts your app.module.ts file will look something like this.

Step 3 : Add routes to Passenger and Reservation Module to app-routing.module.ts

Update app-routing.module.ts to below code.

Step 4: Add <router-outlet></router-outlet> in app.component.html

update the app.component.html as below.

Here in app.component.html we have created two buttons which will make request to passenger and reservation modules individually. we have <router-outlet></router-outlet> so that passenger and reservation modules will be rendered at this position.

Now you are all done lets run our app using ng serve –open

your application will look like this.

Now right click->inspect element and go to network and click on passenger button. When you click on passenger and reservation module each module will be loaded on request basis as shown in images below. This is to be noted that

After clicking on Passenger button

After clicking on reservation button

Note : each module will be loaded only once at first request only.