What is Lazy Loading in Angular

Lazy Loading in Angular 6|7|8 – Angular Provides many different ways to work with the application routing. Lazy Loading is also one of them. In this article, we will talk about what is lazy loading and how you can use it in your angular application with an example.

Lazy loading provides features like loading of the required component and not loading the entire application at once. We are going to learn all of this and also how to implement this. So without wasting more time, let’s dive in.

Lazy Loading in Angular

What is Lazy Loading in Angular?

Lazy loading is a technique in the Angular framework that allows you to load JavaScript components asynchronously when a specific route is activated. Generally all the component are loaded at the starting of the app and making it slow.

NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed.

With Lazy loading, you can only load the required component at the starting of the angular app and call further components when their specific routes are called. This can add some initial performance during the initial load, especially if you have many components with complex routing.

Read Also: Best Interview Questions with Answers in Angular

Advantage of Lazy Loading in Angular?

  1. High performance in bootstrap time on initial load.
  2. Modules are grouped according to their functionality.
  3. Smaller code bundles to download on initial load.
  4. Activate/download a code module by navigating to a route.

So, that’s all about Lazy Loading in Angular. Thanks for reading!

Leave a Comment