Lazy loading Angular

Lazy loading is the best way to separate component into different modules. For large application lazy loading help structure routes for easy readability and fast page load.

How to setup lazy loading in angular

1.Create Modules for route you intent to lazy load

ng g m @module/main --routing

2.Add components to the new module created

ng g c components/home --m @module/main

This automatically adds home to the main module

3.Setting up route in main module

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

4.Finally lazy load Main Route in your application route or (App Route)

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./main/main.module').then(m => m.MainModule)
  }
];

Thanks for reading