Skip to main content

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.
  1. We will create a routing module for both App, Passenger and Reservation Module.
  2. Remove the imports of Reservation module from import array of App.module.ts.
  3. 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.


Popular posts from this blog

Routing in Angular 7

What you will learn after reading this post.What is Routing in Angular 7.Basic routing of component in Angular 7.Active link in routing in Angular 7.Wild card routing in Angular 7.Child routing in Angular 7.1. What is Routing in Angular 7? Whenever in normal HTML web page we click on a link we are navigated to specific page given in that link. When we are navigated then entire view of the application is reloaded again which cost resources and this type of application is not single page application. 

Decompose Monolithic Application To Microservices

How To Decompose Application into Microservices. After reading the previous two posts you all must be excited to implement microservice architecture to your application and that's good you should be ready to implement something new that might boost the application performance,  maintenance, scalability and will make your application future proof. But have you ever thought how will you be breaking your application into micro application i.e microservices. Think about it for some minute exercise your brain for some time before reading the below tutorial.

Now i am sure that you all might  have come through excellent ideas for breaking up your application in microservices. Please feel free to mention your valuable ideas in comment so that other or even me can be benefited by your ideas.

Now before breaking your application into micro-services you should consider following points.
Points to be considered before creating microservices.Your each services should be easily testable.Your a…

Feature Modules in Angular 7

Feature Module Whenever we  create angular application we go on adding components to angular application. But as our application goes on increasing it become to much problematic to maintain such application. Every feature of our application is binded under single module which we call as app module. Which is root module of our Angular 7 application. While developing angular application without modularizing its features creates several problems  Application is not easily scalable.Application is tough to maintain.Application complexity makes it hard to understand. Solution Here feature modules comes for our rescue. Feature modules help angular applications to get modularised on basis of features present in our application. As our application grows we can divide our entire application in small feature using feature module. Feature modules helps in creating boundary that separates our specific functionality or say features. Feature modules communicates with other module or root module usin…

Monolithic Application Architecture

In regular web development process what do we do? We create one war file which contains all functionality, services, modules or all use cases related to our business. In this approach of development we do not focus to make our application modularise. We may be following modularization in our code but end product is not seperated. Every services, modules are bundled up in single war and this war is deployed on server so that our business will be available for outside world which can make a request to get the required resources. This native architecture of development is called Monolithic Architecture.

Creating Simple Hello World Application with SPRING BOOT

For creating a simple running web application with spring boot we do not have to do much. We just require to follow some simple steps and we are good to go. Unlike SpringMVC framework we do not. have to take care of all heck of configuration or XML file in one go we are all set with working mvc based web application.

Now we have to follow these steps.

Generate spring boot project from this url "" You can do the same using STS setting to.Importing the project in STS.