Lazy Loading Feature Modules In Angular

There are three steps to set up a lazy loading feature in Angular.

• Create a feature module.
• Create the routing module for the feature module.
• The configuration of the routes.

Prerequisites:

You should have an Angular app. If you do not have then run the following command.

This command will create a ‘lazy-loading-app’ and -routing flag generate a file ‘app-routing.module.ts’. Now move into your project directory i.e lazy-loading-app

ng new lazy-loading-app --routing

Step 1 and 2: Create a feature module and routing module.

Run the following command.

ng generate module books --routing

This command will create a books folder with two files ‘BooksModule’ and ‘BooksRoutingModule’

Now add a component to the feature module books.

Run the following command to generate the component.
“ng generate component books/book-list”

This will generate a folder inside the books called book-list with all the required file which make the component.

Add the following code to your app.component.html file which is present inside the src/app

<h2>This is lazy loading example</h2> <button routerLink="/books/book">Load Books</button> <router-outlet></router-outlet>

Step 3. Configure the routes

In ‘src/app/app-routing.module.ts’ update the routes array from the following code.

const routes: Routes = [ { path: 'books', loadChildren: 'app/books/books.module#BooksModule' } ];

Now configure the feature module’s routes

Add the following code into the “src/app/books/books-routing.module.ts”

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { BookListComponent } from './book-list/book-list.component'; const routes: Routes = [ { path: '', component: BookListComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class BooksRoutingModule { }

Now run the following command to confirm its working.

ng serve --open

This command will open a browser at port 4200.

Now open your network tab and then click on ‘Load Books’ button.
If a chunk appears, You have done everything correctly.