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.


Comments

Popular posts from this blog

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 "https://start.spring.io/" You can do the same using STS setting to.Importing the project in STS.

Adding Spring-Security to Spring-Boot App

In the previous post we have created a simple spring boot application. This application was very simple application just getting request and showing page for requested URL. Currently all urls are open to all user that is we do not have any kind of authentication on the URL. Our spring boot application is like the open pool in which any one can come and start fishing. Now we want to secure our application so that only authenticated user will be able to visit secure part of the application. For this purpose we will be using the Spring Security. 
Scope of this tutorial. In this we will learn basic integration of spring security with spring boot.
NOTE: This tutorial will just contain only basic integration of spring security. If you haven’t gone through previous tutorial and you are the newbies to this spring boot then I will request you to go through previous post to get understanding of spring boot. 
Now lets get started with the configuration.If you do not have the previous code you can …

About Me

I am a self motivated full stack  developer. I have worked in many projects under several companies.
Java is one of my favourite language. Currently i am working with Tata Consultancy Services, Hyderabad. Tata Consultancy is my first company where i started my career on 24th Oct 2016.

Currently i am working on spring mvc in TCS but i also have a knowledge of Spring Boot, Angular, MongoDB. reqularly i am trying to add extra beauty to my profile. For this i believe in learn and unlearn strategy.

Reason for developing this blog is to show case my work and keep me busy during the weekends. Yahh! its true i have lot of free time on weekends as i don't have any girlfriend to waste my time with. And so i created this blog to show case my learning and work. Now, this blog gives me a goal to pursue and the way to keep me busy.

Through this blog i will try to share to all readers that i will be learning in course of time. I will try to keep this blog updated with latest evolution in develo…

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…

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. 

Micro Services, A Quick Introduction.

What is Micro Services.By the name it is clear that we are talking about mini services which are able to perform their task independently. Micro Services follows micro service architecture instead of monolithic architecture. Whenever we say that application build on microservices architecture that means that this application is not dependent on one services but rather it is dependent on several many services. 
Whenever a request is made through application UI by the user then that application is calling different other services for fulfillment of the