In the previous tutorial we have learnt about the modules, as module is a way to group components, pipes and services that are related. This module set is grouped to form the application. To you want to know more about it click here. So in this tutorial we will learn about the lazy loaded modules and how it works.
What is Lazy Loading?
Lazy loading is the process of loading components, modules, or other assets of a website as they’re required. It means to split the application into modules and load these modules when only its needed. Lazy loaded modules are load only when user navigates to the route of respective module. For example if we are having two modules like login module and registration module and respective routes for these are /app/login and /app/registration. So as per lazy loading if /app/login will hit so only loginModule will render not the registration one. Similarly if /app/registration will hit so only registrationModule will be render not the loginModule.
Advantage of Using Lazy Loading
- If the application is small then its fine to load all the modules at once. But if application grows, load time will increase if everything will load at once. So Lazy loading allows Angular to load components and modules only when they’re needed. Due to that load time also decreases.
- In lazy loading page renders faster as compare to eager loading.
- Smaller code bundles to download on initial load.
- Modules are grouped according to their functionality.
Now Lets understand the lazy loading by using some example:
We will create two modules login module and registration module. Below command is used to create the module-
In this command login is our module name and if you want to create routing file then you can use –routing as we have added otherwise we can skip this. So below will be the result when we will run above command-
As you can see here two files created login.module.ts and login.routing.module.ts.
Similarly we will create another module i.e registration module.
Now lets add the lazy loading route in app.route.ts file.
So here main property which is used to load the lazyload mdoules is loadChildren(). This way the lazy module will only be loaded when the lazy route is triggered by the user.
So now lets see what happened if you will trigger the login and registration routes.
1. Lets hit login route first : http://localhost:4200/login , So in browsers network tab you will be able to see only login module will be loaded not the registration one –
2.Similarly lets hit registration route http://localhost:4200/registration , So in browsers network tab you will be able to see only registration module will be loaded not the login one –
So in this way you can create N numbers of modules in your application and grouped the components in respective modules. So that it will be very easy to group the similar functionality and code readability also increases. And modules will load on demand.
Now you can create the respective components inside this modules.For example inside the login module you can create the login component which is basically renders the login form and inside the registration module you can create the registration component which will render the registration form. Also you can create another components which are related to these.
