Lazy loading in Angular

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 { }

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

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/

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.