In this tutorial, we are learning how to lazy load modules in Angular 10 using dynamic imports.

Lazy loading is the method to download the data on-demand, for instance, Documents, JavaScript, CSS, Images, and Videos in small pieces.

Data loads in chunks instead of bigger pieces; we use dynamic imports and loadChildren properties to deal with lazy loading in Angular.

To create lazy loading in Angular 10, we use the angular app routing module and main app module class to lazy load the angular component.

You can effortlessly get the AppRoutingModule in the app-routing.module.ts file, whereas AppModule class is found in the app.module.ts file.

The standard import syntax is static and will always result in all code in the imported module being evaluated at load time. In situations where you wish to load a module conditionally or on demand, you can use a dynamic import instead.

– MDN

Create Angular Application

It is the primary tool which is also a basic building block for all the angular applications. You need to run the following command to install the latest version of Angular CLI:

npm install -g @angular/cli

BashCopy

Install a new angular application:

ng new angular-lazy-load-example

BashCopy

Navigate to the project root:

cd angular-lazy-load-example

#angular