DEV Community

es404020
es404020

Posted on

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
Enter fullscreen mode Exit fullscreen mode

2.Add components to the new module created

ng g c components/home --m @module/main
Enter fullscreen mode Exit fullscreen mode

This automatically adds home to the main module

3.Setting up route in main module

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

Enter fullscreen mode Exit fullscreen mode

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)
  }
];

Enter fullscreen mode Exit fullscreen mode

Thanks for reading

Top comments (0)