What is Lazy Loading?

Lazy loading is the process of loading components, modules, or other assets of a website as they’re required.

Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be loaded as well.

For a small application this would be okay. But as the application grows the load time will increase if everything is loaded at once. Lazy loading allows Angular to load components and modules as and when they’re needed.

First of all, to understand how lazy loading works in Angular, we need to understand the basic building blocks of the framework: NgModules.

What are NgModules?

Angular libraries like RouterModule, BrowserModule, and FormsModule are NgModules. Angular Material, which is a third party tool, is also a type of NgModule.

NgModules consist of files and code related to a specific domain or that have a similar set of functionalities.

A typical NgModule file declares components, directives, pipes, and services. It can also import other modules that are needed in the current module.

One of the important advantages of NgModules is that they can be lazy loaded. Let’s have a look at how we can configure lazy loading.

How to Create NgModules

In this tutorial, we will create two modules, Module A and Module B, which will be lazy loaded. On the main screen we will have two buttons for loading each module lazily.

#angular #javascript #web-development #programming #developer