Lazy Loading Modules in Angular 8

Lazy loading is a very helpful concept in Angular. It loads NgModuls only when we navigate to rout. If we have a large application with multiple routes, we should consider using this concept. It will keep the existing bundle sizes smaller and as a result, the application can be loaded much faster. It is helpful to brings down the size of large files.

Angular Application Set Up:

Use following command to create a new app called?ABC-TEST?with a routing file called?app-routing.module.ts. following files which we need to set up lazy loading for our feature modules.

ng new ABC-TEST?--routing
        

We can navigate to the root folder of the app by using the following command:

cd ABC-TEST        

Next, we need to create our feature modules (Lazy loading) with components.

Using following command, we can create a new module.

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

This command creates a?customers?folder with the new lazy-loadable module?CustomersModule?defined in the file?customers.module.ts. The command automatically includes?the?CustomerComponent?to the new feature module.

Because the new module is designate to be lazy-loaded, the command does NOT add a reference for the new feature module to the root application's module file,?app.module.ts. Instead, it adds the declared route,?customer-list?to the?routes array declared in the module provided as the?--module?option.

Result of?app-routing.module.ts?is as below:

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 { };        

To denote 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.modul
ng generate module settings --route settings--module app.modulee        

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

<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>>        

Now when the route gets activated, at that time the loadChildren property will get activated and load the requested module. It will then load the requested component and display that component’s result.

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

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

Angular 8 provide support for dynamic imports in our router configuration. In short we use the import statement for lazy loading the module and this will be understood by the IDEs, webpack, etc.

So when you update to Angular 8, it will automatically accommodate the changes in our application.

Now if we look at how lazy loading is done in this new route config, we can see:

{path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(n => n.UserModule)};

The meaning of that syntax is that loadChildren is a function which will execute when it tries to access the user module. This will asynchronously load the import statement with implementation of module.