Eager Loading, Lazy Loading, and Pre-Loading in Angular 2+: What, When, and How?

Angular 2+ has been a very popular front-end platform for modern web applications since 2016. It introduced a component-based architecture with great benefits like modularity, which allows developers to split the web application into different modules and load them with one of the three module-loading strategies, including Eager Loading, Lazy Loading, and Pre-Loading. In this tutorial, I would like to introduce these three module-loading strategies in Angular with What, When, and How, and at the end of this tutorial, you will be able to implement these three loading strategies in the same web application.

What is {Eager Loading, Lazy Loading, Pre-Loading} in Angular?

1. What is Eager Loading?

Feature modules under Eager Loading would be loaded before the application starts. This is the default module-loading strategy.

2. What is Lazy Loading?

Feature modules under Lazy Loading would be loaded on demand after the application starts. It helps to start application faster.

3. What is Pre-Loading?

Feature Modules under Pre-Loading would be loaded automatically after the application starts.

When to use {Eager Loading, Lazy Loading, Pre-Loading} in Angular?

Understanding when to use the right module-loading strategy in the web application is far more important than just having a purely intellectual concept of these strategies. I would like to share my personal opinion as follows:

When to use Eager Loading?

Case 1: Small size applications. In this case, it’s not expensive to load all modules before the application starts, and the application will be faster and more responsive to process requests.

Case 2: Core modules and feature modules that are required to start the application. These modules could contain components of the initial page, interceptors (for authentication, authorization, and error handling, etc.), error response components, top-level routing, and localization, etc. We just have to eagerly load these modules to make the application function properly despite the application size.

When to use Lazy Loading?

The scenario of applying Lazy Loading is relatively simple and straightforward. In a big-size web application, we can lazily load all other modules that are not required when the application starts.

When to use Pre-Loading?

Compared with Eager Loading and Lazy Loading, Pre-Loading is not so much frequently used in web application development. Based on my understanding of this loading strategy, Pre-Loading would be favorable for two cases though.

Case 1: Medium size application. In this scenario, we can make the application start faster since it will load all other modules later that are not required to run the application. And the application would be more responsive to process users’ requests than applying Lazy Loading strategy since the application will load all these modules after the application started.

Case 2: Some specific modules that users are very likely to use after the application started. In this scenario, we can pre-load these feature modules and still lazy load other modules.

Section Summary

Now we should have some ideas about when to use these module-loading strategies based on different cases. And from above analysis, you may already notice that, for an enterprise-level web application, the ideal solution would be a combination of these three strategies:

• Eager Loading: used to load core modules and feature modules that are required to start the application.
• Pre-Loading: used to load specific feature modules that are very likely to be used soon after the application started.
• Lazy Loading: all other modules could be lazily loaded on demand after the application started.

How to Implement Eager Loading, Lazy Loading and Pre-Loading?

In this section, I will show how to implement these three module-loading strategies in the same web application, and then I will use the developer tool in the broswer to demo the difference between these strategies.

In my sample Angular application, I created three feature modules for Eager Loading, Lazy Loading, and Pre-Loading, respectively. The feature module structure is as follow:

Feature Modules Structure

As the above structure shows, each module contains a parant component and two children component.

Eager Loading Implementation

The file structure of the eager loading module is as follow:

Eager Loading Module Folder Structure

In the eager-home.component.html file, I add navigation routes to its two children component. Code shows as follow:

Then we need to declare the eager-home component as well as its two children components in eager-loading.module.ts.

To apply Eager Loading strategy, at first, we need to register all components that will be eagerly loaded in the app-routing.module.ts with forRoot strategy.

At second, we need to import the EagerLoadingModule in AppModule, so that it will be loaded before the application start.

Now we are all set to apply Eager Loading.

Lazy Loading Implementation

The file structure of lazy loading module is as follow:

Lazy Loading Module File Structure

At first, we need to create navigation routes in the lazy-loading-home.component.html to its two children component.

At second, we need to register these lazy loading components in the lazy-loading-routing.module.ts with forChild strategy.

After that, we need to declare all these lazy loading components and import the LazyLoadingModule in the lazy-loading.module.ts.

So now, the LazyLoadingModule is ready to lazily load. And the very last step is to add a route for this LazyLoadingModule in app-routing.module.ts with loadChildren property. And now, the app-routing.module.ts would look like as follow after we added a route for this LazyLoadingModule.

That’s it! We should not import this LazyLoadingModule in app.module.ts, otherwise, it will be eagerly loaded instead.

Pre-Loading Implementation

The file structure of Pre-Loading module is as follow:

Pre-Loading Module File Structure

Actually, Pre-Loading is pretty similar to Lazy Loading, and the only difference is that we need to specify the preloading strategy. In this section, I would like to focus on how to customize pre-loading strategy.

At first, after we added the pre-loading route to app-routing.module.ts, it should look as follow:

As you can see from above sample code in line 29 and line 36: I added an extra property named “data” with “applyPreload” set to “true”, and I also specified that I will use my own CustomPreloadingStrategy. So now we need to complete two things:

• Implement the CustomPreloadingStrategy class using PreloadingStrategy interface.
• Provide the CustomPreloadingStrategy class in app.module.ts

Following is my sample code to implement the CustomPreloadingStrategy class:

As you can see from above sample code, this custom preloading strategy will scan each route at root level, and check if that route contains “data” property and “applyPreload” is true. If it is, then it will preload that target module, otherwise, it will do nothing (that means, the Lazy Loading strategy would be applied instead).

Then we need to provide this CustomPreloadingStrategy in the app.module.ts file.

Add Navigation Routes to the Three Modules

So now we have set up everything for these three modules, and we just need to add navigation routes to these three modules in app.component.ts file.

That’s it!

Verification with Developer Tool in Browser

In this section, I am going to use Chrome as my browser. And to avoid any unnecessary confusion, I would like to set applyPreload as false, so that we can clearly see what the eager loading looks like. In this case, we are only using eager loading and lazy loading in the demo application.

Set applyPreload to False

Now let’s run the web application using “ng serve --open”. And the demo User Interface looks like following image:

Web Application Starting Page

I know the UI looks ugly……😂😂😂

Now if we open the Developer Tool in Browser and go to Network item, it looks like follow:

Eager Loading Network

As we can see, there is no information about either Lazy Loading Module or Pre-Loading Module.

But now, if we click the “Lazy Loading” button in our web application, it will navigate to the lazy loading module, and the Network table right now looks as follow:

Lazy Loading Network

Compared with the Eager Loading Network image, we can clearly see there is an extra item has been loaded after we clicked the “Lazy Loading” button, and it is our lazy loading module.

This is how Lazy Loading works: feature modules using Lazy Loading strategy will be loaded on demand after the application starts.

And if we click the “Pre Loading” button, the pre-loading module also would be lazily loaded since we have set “applyPreload” to “false”.

So how Pre-Loading strategy looks like in our web application?

Let’s set “applyPreload” to “true”, and restart our application.

Set appPreload to True

After we do so, let’s check the Network again and I got the image as follow:

Pre-Loading Network

There are two things we can see from the above image:

• From the Name list, we can see that the pre-loading module has been loaded.
• From Waterfall column, we can see that the pre-loading module is the last loaded bundle. That’s to say, the application loaded all required files at first to start the application, and then it loaded the pre-loading module.

That’s how Pre-Loading strategy works!

Reference:

1. Source code for this demo can be found from my personal Github at: https://github.com/doctral/Medium-Module-Loading-Strategies.git

Thank you for your time!