Lazy Loading NgModules on Angular 8

Lazy loading is a very useful concept in Angular. It is a process of loading NgModules only when you navigate to the route.

Lazy loading is a very useful concept in Angular. It is a process of loading NgModules only when you navigate to the route. If you have a large application with numerous routes, you should consider using this concept. It will keep the initial bundle sizes smaller and as a result, the application can be loaded much faster.

Set Up an Angular Application

Enter the following command to create a new app called test-app with a routing file called app-routing.module.ts. This is one of the files which we need to set up lazy loading for our feature modules.

ng new test-app --routing

Navigate to the root folder of the app by using the following command:

cd test-app

Create a Module with Routing

Next, we need to create our feature modules with components to navigate to.

To create a new module, execute the following command.

ng generate module home --route homepage --module app.module

The command above will generate a new module called home and homepage as the route path to load the home component. In addition, it will add the homepage route inside the Routes array inside this module as the --module options.

app-routing.module.ts

Here is the result of our app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
   { path: 'home', 
     loadChildren: () => import('./home/home.module').then(m =>     
     m.HomeModule) 
   }
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

The loadChildren property is used to specify the module that needs to be lazy-loaded when it is first navigated to.

In Angular 8, dynamic import syntax was introduced for lazy-loaded routes as one of the new features instead of a custom string as in previous versions.

To demonstrate the functionality of this lazy loading, we need to create 2 more modules called profile and settings.

ng generate module profile--route profile --module app.module
ng generate module settings --route settings--module app.module

Set Up the Interface

We will create a list of modules in app.component.html with hyperlinks to link to each component.

app.component.html

<ul>
   <li>
       <a routerLink="home">Home</a>
   </li>
   <li>
       <a routerLink="profile">Profile</a>
   </li>
   <li>
       <a routerLink="settings">Settings</a>
   </li>
</ul>
<router-outlet></router-outlet>

Here is the result when you try to navigate to each module.

We can see that each module is called ONLY when we navigate to the link. You can check the module is indeed being lazy-loaded with developer tools in your browser.

Conclusion

In this article, we have learned how to implement lazy loading in an Angular application and how to check its functionality in our browser.

If you think this article was helpful, don’t forget to share it with your friends.

Suggest:

☞ Angular Tutorial - Learn Angular from Scratch

☞ Web Development Tutorial - JavaScript, HTML, CSS

☞ Javascript Project Tutorial: Budget App

☞ Test Driven Development with Angular

☞ JavaScript Programming Tutorial Full Course for Beginners

☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch