Angular : Lazy-loading-ngmodules

By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules loads.

Lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.

Configuring a lazy-loaded route

For lazy load Angular modules, use loadChildren (instead of component) in your AppRoutingModuleroutes configuration as follows.

---

const routes: Routes = [{ path: 'orders', loadChildren: () => import('./tailours/tailours.module').then(m => m.TailoursModule) }, { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }];

---

Step-by-step Guide

There are two main steps to setting up a lazy-loaded feature module:

1. Create the feature module with the CLI - using the --route flag.

2. Configure the routes.

You can setup your app with angular CMD - ng new customer-app --routing

After That create feature modules with the routing i.e. customers, tailours.

1. ng generate module customers --route customers --module app.module

2. ng generate module tailours --route orders --module app.module

In src/app/app-routing.module.ts File

add following routes

const routes: Routes = [{ path: 'orders', loadChildren: () => import('./tailours/tailours.module').then(m => m.TailoursModule) }, { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }]; In src/app/app.component.html File

add following code

<h1> {{title}} </h1><buttonrouterLink="/customers">Customers</button><buttonrouterLink="/orders">Orders</button><buttonrouterLink="">Home</button><router-outlet></router-outlet>

To see your app in the browser so far, enter the following command in the terminal window:

ng serve

Then go to localhost:4200 where you should see “customer-app” and three buttons.

Verify lazy loading

You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing Cmd+Option+i on a Mac or Ctrl+Shift+j on a PC and go to the Network Tab.

Click on the Orders or Customers button. If you see a chunk appear, everything is wired up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each.

---