Loading Concept in Angular – In depth walkthrough

Lazy loading is a technique in Angular that allows you to load components asynchronously when a specific route is activated.

Advantages :
1)Reduces the start-up time of the application.

2) application consumes less memory because of on-demand loading.

Disadvantages:
User experience may be affected. For example, backtracking may not be possible if the page structure is not optimal.

Different Loading StrategiesBasically we can load any Module in three different ways,

• Eagerly
• Lazily
• Preloading

Eager loading:
By default every Angular Application uses this loading strategy. i.e. just a one by one component loading as per routes

Lazy Loading:

As seen, we can render the module on demand when needed.

Preloading

By preloading, the application will start loading chunks of modules before needed.

[Note here we can load all modules at once or required modules]

step 1) load all modules at once or none at once.

step 2) load specific modules using custom preloading.

As you can see above we have implemented the PreloadingStrategy class so we need to override the Preload() method of that particular class.
This method receives the active route as a parameter. With this route, it will look at whether the Data object was set or not.
If set, then it will load that module otherwise it returns null which means it will not preload.