Lazy Loading in Angular: A Full Beginner’s Guide 

Angular, a widely-used JavaScript framework, excels in creating dynamic web apps, with lazy loading as a key feature enhancing efficiency and user experience. This technique allows loading specific application components only when needed, reducing initial load times and boosting performance. This beginner-friendly guide delves into lazy loading in Angular, exploring its significance and implementation in Angular applications.

I. What is Lazy Loading in Angular?

Lazy loading in Angular, refers to the technique of loading website components, modules, or assets specifically when they are needed, rather than all at once. This approach is particularly relevant in Angular’s Single Page Applications (SPA), where traditionally, all components load simultaneously, potentially including unnecessary libraries or modules. While this might not significantly impact smaller applications, in larger applications, it can lead to increased load times. Thus, lazy loading optimizes performance by ensuring that components and modules are loaded only as required.


II. Benefits of Lazy Loading in Angular

Quicker Page Loading JavaScript, essential for displaying and loading your page, can slow things down because the browser needs to load all of it before showing your page. Lazy loading changes this by breaking JavaScript into chunks. The first chunk, which loads immediately, contains just what’s needed for the main module of your page. The rest of the modules load as they’re needed. This method speeds up how fast your page loads and appears.
Reduced Data Usage By breaking the data into chunks and loading them only, when necessary, your site can use less bandwidth. This is especially beneficial for users with limited data plans.
More Efficient Browser Resource Use Lazy loading means the browser only loads the chunks it needs, avoiding the use of memory and CPU on unneeded code. This makes for a more efficient use of browser resources.

Learn more:

Open-Source Software Meaning: An Insightful Overview

Top 10 best Cross Platform app development frameworks

III. Implementing Lazy Loading in Angular

Here’s a must-have guide to implementing lazy loading in an Angular app.

lazy loading in angular

Lazy Loading in Angular

Step 1: Begin by creating a module along with a dedicated routing file.

This is essential for managing the angular lazy loading components within Angular 11’s modules.

To do this, use the command below to generate a module named ‘lazy-loading’ with its routing:

lazy loading angular

Step 1

Why start with a module? It’s because in Angular, you can’t lazy load individual components. This limitation stems from Angular’s architecture. Think of a module in Angular as a collection box that contains components, services, pipes, and more. It’s like a package that lists all the elements it contains and their dependencies.

In your application’s distribution, these dependencies come together to form a ‘chunk’ – essentially, a piece of transpiled JavaScript code. The main chunk includes modules that are directly imported, while those designated for lazy loading are grouped into a separate chunk. It’s important to note that while modules can form a chunk, individual components cannot. Hence, the inability to lazy load a single component.

Step 2: Create a Component Lazy Loading Angular

In this phase, we’ll develop a lazy loading components angular module.

Take, for instance, a social media platform. Imagine there’s a route named ‘/user-dashboard’ that shows the user’s dashboard interface. This includes features like crafting a new post, viewing past posts, and other user activities. We’ll construct a component for this purpose and name it user-dashboard.

Use this command to create it:

what is lazy loading in angular

Step 2

Step 3: Insert the Link in the Header

Place a link in the header for the route where lazy loading is to be applied. For instance, if you want the ‘user-dashboard’ component to be loaded only when its specific route is accessed, insert the following link in the header for the ‘/user-dashboard’ route.

Here’s the necessary code snippet for app.component.html:

angular lazy loading components

Step 3

Step 4: Implement Lazy Loading with loadChildren

In this step, we implement lazy loading for the ‘/user-dashboard’ route using loadChildren. This can be done in two distinct methods:

  • Using Promise
  • Using Async

Using Promise

Firstly, we explore the implementation of lazy loading Angular with loadChildren using a promise-based approach. To achieve this, modify the app-routing.module.ts as follows:

lazy loading components angular

Step 4

Here, the ‘/user-dashboard’ route is specified in the path property. It’s important to note that the import statement also loads the lazy loading module we have created.

This code snippet employs a promise-based syntax to specify which routes should be lazily loaded. The routes intended for lazy loading are included in the loadChildren property as demonstrated. While promises are fundamental, more advanced versions like Angular 11 might favor a more streamlined coding approach.

Using Async

Alternatively, async can replace promises for a more straightforward, legible, and elegant code structure. The same functionality can be restructured using async as follows:

const routes: Routes = [

implement lazy loading in angular

Step 4-2

The key distinction between this async-based code and the earlier promise-based one is the elimination of the .then() method. This is achieved by directly using the return value from await import(…), and directly referencing LazyLoadingModule in a single line, rather than employing then() and specifying LazyLoadingModule.

Step 5: Configuring the Route

To finalize, we configure the route using the code below in the user-dashboard-routing.module.ts file.

component lazy loading angular

Step 5

Great job! You’ve now successfully set up lazy loading in your Angular app. Whenever a user heads to a route needing the lazy-loaded module, it gets loaded just when needed. This enhances your app’s initial load time, making it more efficient.

IV. Best Practices for Implementing Lazy Loading in Angular

There are several ways to implement lazy loading in angular, here are the most popular ones:

1. Module Organization

Organize your application into separate modules for each feature you plan to lazy load. This structure ensures that only the necessary code is loaded when required, enhancing performance.

2. Route Configuration

Utilize the loadChildren method in your route configuration. This method allows Angular to load modules only when they are needed, significantly reducing the initial load time of the application.

3. Bundle Size Reduction and Code Splitting

Focus on reducing the size of your bundles and splitting your code effectively. This can be achieved by analyzing your bundles with tools like Webpack bundle analyzer, helping you identify and eliminate unnecessary code and dependencies.

lazy loading in angular

Implement Lazy Loading in Angular

4. One Module Per Page Strategy

Adopt a strategy where each page of your application has its module, known as the Feature module. This approach simplifies your application’s structure and improves loading efficiency by isolating the code needed for each page.

5. Strategic Preloading

Implement strategic preloading of modules. This involves preloading certain modules that users are likely to access next, based on their behavior. This strategy strikes a balance between immediate and lazy loading, improving user experience without compromising the initial load performance.

6. Regular Review and Optimization

Continuously review and optimize the structure and loading behavior of your application. As your application grows and evolves, regular adjustments and optimizations are necessary to maintain and enhance the performance benefits gained from lazy loading.


In summary, lazy loading in Angular is a game-changer for enhancing application performance, especially for SPAs. It not only speeds up load times and reduces data usage but also optimizes browser resource utilization. However, effective implementation requires adherence to best practices like module organization, route configuration, and strategic preloading.

For those looking to leverage lazy loading in Angular or optimize existing projects, TECHVIFY offers expert services. Our team is well-versed in Angular best practices and can help you maximize your application’s efficiency and user experience. Reach out to TECHVIFY for top-notch Angular development support.

Vote this post
No tags for this post.

Related Topics

Related Topics

golang vs node js performance benchmark

Go vs. Node.js : Choose The Right Language

Picking the right technology stack for a new project is a tough decision for businesses and developers, especially regarding backend development. This involves a lot of work on APIs, libraries, managing data, and code that users need help seeing. Two main programming languages are running for the lead role in backend development. You may know of Node.js, which brings JavaScript to the server side. Meanwhile, Google Go, or Golang, has been making waves in backend development, especially after big names like Uber started using it. This article will dive into Go vs. Node.js, aiming to give you a clearer picture…

29 February, 2024

large language model

The Next Generation of Large Language Models 

Large Language Models (LLMs) are computer programs that can understand and generate natural language, like words and sentences. They can do many things, like chat with people, write stories, or answer questions. The next generation of Large Language Models (LLMs) is emerging in the constantly changing field of generative AI. They are revolutionizing how we interact with and leverage artificial intelligence. In this article, let’s explore three exciting areas that could shape the future of LLMs: 1. Models that Generate Their Own Training Data One of the most pressing challenges in AI development is the need for high-quality training data….

28 February, 2024

PostgreSQL vs. Oracle

An In-Depth Look at PostgreSQL vs. Oracle for Database Management

PostgreSQL and Oracle share many similarities when considering databases, but choosing the right one depends on your specific requirements. Both are excellent choices for managing large datasets securely and efficiently. However, knowing the differences between PostgreSQL vs. Oracle is essential to choosing the right one for your needs. In this article, we’ll explore the difference between Oracle and PostgreSQL to help you decide which database system aligns with your business objectives. Overview of PostgreSQL and Oracle What Is PostgreSQL? PostgreSQL, also known as Postgres, is an advanced, open-source object-relational database system, often highlighted in discussions of PostgreSQL vs. Oracle for…

28 February, 2024