Lazy Loading Angular Module -Routing

Angular is very modular, and one of the nicest features about Angular’s modularity architecture is the Lazy loading point. Lazy loading simply means loading a module and all it components, chunks etc. on demand. i.e Angular does not get to download all the files from the server until you request for it. This is a huge help for performance and reducing the initial bundle size plus, it very straightforward to setup.

In this article we are going to be working on a simple E commerce style application, breaking every part into modules so we can lazy load them when they are needed.

Lazy loaded routes need to be outside of the root app module, so you’ll want to have your lazy loaded features into feature modules.

Assuming that you have an Angular CLI project, let’s create a new feature module:

$ ng g module shop

now let’s generate 3 other components in our shop module this simply means all this three other components will be a child of our shop module and will be loaded selectively on demand.

$ ng g c home/home
$ ng g c shop/cart
$ ng g c shop/checkout 
$ ng g c shop/confirm

notice we are nesting the components under each file structure called shop & home just to keep things simple and modular. Since we are using angular cli all components will automatically be imported and declared into the app.module.ts. Please remove them except for the HomeComponents! which we want to eager load.

In my everyday development in angular, I usually separate route files from my app.module.ts. so let’s have a main route file called main.route.ts

import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';
  
export const routes: Routes = [   
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'shop', loadChildren: './shop/shop.module#ShopModule' },
{ path: '**', component: HomeComponent }
 ]

The homeComponent will be eager loaded.

There’s a few important things to notice here:

1. We use the property loadChildren instead of component.
2. We pass a string instead of a symbol to avoid loading the module eagerly.
3. We define not only the path to the module but the name of the class as well.

There’s nothing special about shopModule other than it has its own routing called shop shop.route.ts and all it’s generated components. lets set up the route.

import { Routes } from '@angular/router'; 
import { CartComponent } from './cart/cart.component'; 
import { CheckoutComponent } from './checkout/checkout.component'; 
import { ConfirmComponent } from './confirm/confirm.component';  
export const routes: Routes = [     
         { path: '', component: CartComponent },     
         { path: 'checkout', component: CheckoutComponent },    
         { path: 'confirm', component: ConfirmComponent } 
];

And finally, in the shop module itself, you’ll include your routes with RouterModule’s forChild method instead of forRoot:

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { CartComponent } from './cart/cart.component'; 
import { CheckoutComponent } from './checkout/checkout.component'; import { ConfirmComponent } from './confirm/confirm.component';  import { routes } from './shop.routing'; 
import { RouterModule } from '@angular/router';  
@NgModule({   
    imports: [     RouterModule.forChild(routes)   ],   
    declarations: [CartComponent, CheckoutComponent,           ConfirmComponent] 
}) export class ShopModule { }

And that’s all there is to it! Now you can use the routerLink directive to navigate to /shop, /shop/checkout or /shop/confirm and the module will be loaded the first time one of these paths are navigated to.

Tip: If it’s not working right away, try restarting your server.

Verify that lazy loading works in DevTools by seeing if a new chunk is loaded when navigating to a route on the lazy loaded module:

Lazy loading is a cool feature as you can see, but we can do even more better than what we have. what if we want to load those requested modules in the background? so we have them ready in cache and navigate instantly. That’s where Preloading comes to play, Which is what I will be demonstrating in my next article. So…see you next week.

sample lazy loaded app