Lazy loading is one of the most powerful and useful concepts of Angular Routing. It makes the web pages easy to download by downloading them in chunks instead of downloading everything in a big bundle. Lazy loading facilitates asynchronously loading the feature module for routing whenever required using the property loadChildren.

See the following example where we are going to load both Employee and Order feature modules lazily.

See the example:

1. const routes: Routes = [  
2.   {  
3.     path: ’employees’,  
4.     loadChildren: () => import(‘./employees/employees.module’).then(module => module.EmployeesModule)  
5.   },  
6.   {  
7.     path: ‘orders’,  
8.     loadChildren: () => import(‘./orders/orders.module’).then(module => module.OrdersModule)  
9.   },  
10.   {  
11.     path: ”,  
12.     redirectTo: ”,  
13.     pathMatch: ‘full’  
14.   }  
15. ];