Loading Strategies in Angular

Introduction

    Angular is an open-source front end platform that makes it easy to build web, mobile and desktop applications. Angular has great benefits which allows developers to split the application into different modules and load them with different loading strategies depending on the needs. In this blog , we are going to discuss in more detail about the different types of loading strategies.

Loading Strategies in Angular

Loading is necessary to load components that are required to render an application. And the different types of loadings are

1. Lazy Loading
2. Eager Loading
3. Pre-Loading

Eager Loading

• All the modules and components are loaded before the application starts.
• As the modules get loaded before the application starts, there might be a delay in the application starts. But after loading, the application will be much faster when compared to other loading strategies.
• In small scale applications, this type of loading is suitable.
• Eager loading is the default loading strategy to load modules in Angular.

Lazy Loading

• The modules are loaded on demand after the application starts which helps to start the application faster and improves the user experience
• It helps to reduce load times.
• It helps to load the web pages in chunk instead of downloading everything in a big bundle.
• Lazy loading is implemented by specifying the property loadChildren.

Eg :

Pre Loading

• The modules are loaded automatically to render the page faster as much as possible after the application starts.
• And the implementation of this strategy is similar to lazy loading and the only difference is that we need to specify the preloading strategy.
• We need to add an extra property data with preload set to true.

Eg :

Conclusion

• And now, we discussed about the loading strategies and its usage.
• It is important to know which loading strategy to use to load a Module.