Lazy-Loading Routes

At some point, our application may grow in size, and the amount of data we put into it may also grow. The result is that the application may take a long time to start initially, or certain parts can take a long time to start. To overcome these problems, we can use a technique called lazy loading.

Lazy loading means that we don’t load all parts of our application initially. When we refer to parts, we mean Angular modules. Application modules can be separated into chunks that are only loaded when needed. There are many advantages of lazy loading a module in an Angular application:

• Feature modules can be loaded upon request from the user.

• Users that visit certain areas of our application can significantly benefit from this technique.

• We can add more features in a lazy-loaded module without affecting the overall application bundle size.

Implementing lazy-loading

To understand how lazy loading in Angular works, we will create a new module with a component that displays information about our e-shop application:

1. Run the following command to create an Angular module with routing enabled:

Note: The command below is for creating a module locally using the Angular CLI.