How To Make A Lazy Loading Module | Types Of Module
What is Module loading in Angular?
Hello Viewer, In this article I will teach you how to work Angular Lazy Loading module and why we are Using Lazy Loading in Module. and Types of Loading Module in Angular. Basically Module Loading is a way of How to load our module. Angular Provide You to different types of module loading. So I will tell you all types of loading module in briefly explained with you.
Types of Module Loading In Angular
- Eager loading
- Lazy loading
- Pre loading
- Custom preloading
In Angular we have four types of loading as you see in above heading. I will explain you all loading module in briefly. First we know about Eagar loading
How to Make a Template Driven Form in Angular
1. Eager loading
Module are by default loaded in Eager Loading. In Eager loading our module is loaded before our application are executed. Whenever you create project in Angular. You use any module for your projects need according your all module is loaded by default in Eager loading. I will explain you in code also. Code in below you can see that how to load our module in eager loading. First thing you also know when we create a module then you do first step import our module name in app.import.ts file.
2. Lazy Loading
Lazy loading is very important Module loading in Angular. Lazy loading is on demand module loading. It is very useful loading module. When we work on large project then lazy loading module play important role to faster our application process. I will tell you in details how is it work. Suppose we are work on large project we needs lots of module in different categories. If we loaded all module in eager loading. Our project performance is decreased then we use lazy loading module to increase our project performance and you think how to increase project performance using of lazy loading so don’t worry I will explain you in details. Basically lazy loading load a module on demand. Suppose we create three modules one is student module and second one is employee module and third one is home module. When our application run then we need only one module that one is home module. But if we have also loaded other two module in eager loading. Then our application consume much large memory space when we load other two module compared to load only home module. So in this situation we load other two module is loaded in lazy loading. When we need this module then our module is loaded. In lazy loading we don’t need to import our module name in app.import.ts file. In lazy loading module loaded in help of loadChildren you can see in below images. See how to implement lazy loading in code in below image
3. Pre loading
Preloading is third one module loading techniques. In preloading module loading techniques is different to others techniques. Pre loading module load when our application are executed properly and after then our pre loading module is loaded. When we use preloading module they provide two property
How To Make Website Using HTML & CSS | Full Responsive Website Design Step by Step
- PreloadingAllModules
- Nopreloading
When we select preloadingAllModules then our Project all modules are converted into pre loading module. Suppose we create three module one is lazy loading module and another one is Eager loading module and third one is pre loading module. When we convert third one module in pre loading then automatically another two modules are also convert into pre loading module. And when we choose second property Nopreloading then our all module are same as back our Past module property. Overcome this situation we need custom pre loading module.
preloadingAllModules
Nopreloading
4. Custom pre loading
Custom pre loading is used to overcome of problem of pre loading module. When we convert any module into custom pre loading module. Then your first step you create a service file and implements PreloadingStrategy in service file and then used preload function and then we check condition data are preload or not. If the data is preload then custom pre loading module is loaded. If data preload is not true then our custom pre loading module is not loaded. See example in below
Custom Pre Loading service file
App.routing.module.ts
Different between Eager loading and lazy loading
Eager loading module loaded is by default and lazy loading module loaded on demand
Eager loading module loaded before application start and lazy loading module loaded when application is completed.
If you have any problem to understand this article then you also watch my video tutorial link in below
Lazy Loading in Angular in Hindi | Angular Modules | Types of Modules loading
