Lazy loading in Angular

Question

How would you implement lazy loading in Angular for a large-scale ERP application built on .NET Core?
Use Case: To optimize performance and reduce initial loading time for the ERP application by loading modules asynchronously.

Mrunali Sawant · Answer

To implement lazy loading in Angular for a .NET Core ERP application, structure the application into feature modules and configure lazy loading in the AppRoutingModule using the loadChildren syntax. This approach optimizes performance by loading modules asynchronously only when needed. Additionally, use Angular’s PreloadAllModules strategy to preload modules in the background, enhancing load efficiency. Structure Modules : const routes: Routes = [ { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }, // more routes... ]; Preloading Strategy : @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] }) export class AppRoutingModule { }

Jaimin Shethiya · Answer

Hello Vikas, Please refer below links. https://blog.logrocket.com/using-defer-angular-17-implement-lazy-loading/ https://www.digitalocean.com/community/tutorials/angular-lazy-loading https://www.geeksforgeeks.org/implementing-lazy-loading-in-angular/ https://www.freecodecamp.org/news/lazy-loading-in-angular-intro-to-ngmodules/ https://angular.io/guide/lazy-loading-ngmodules Thanks

Jaydeep Patil · Answer

Hi, Check my below article for the same, In which I explained all things with examples. https://www.c-sharpcorner.com/article/feature-module-with-lazy-loading-in-angular/

Jayraj Chhaya · Answer

To implement lazy loading in Angular for a large-scale ERP application, you can divide the application into feature modules and load them on demand. This approach helps reduce the initial bundle size and improves performance by loading only the required modules when navigating to specific routes. const routes: Routes = [ { path: 'dashboard', component: DashboardComponent }, { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) }, { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }, { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) }, { path: '**', redirectTo: 'dashboard' } ]; The feature modules like ProductsModule, CustomersModule, and OrdersModule are loaded lazily when the corresponding routes are accessed. This way, only the necessary modules are fetched, enhancing the application's performance and user experience.

Lazy loading in Angular

Answers (4)