Can can you explain preloading Angular with example advance level high volume modules

Preloading in Angular refers to the process of loading feature modules in the background after the initial application has loaded. This helps to improve the performance of an Angular app by reducing the time it takes to access a feature module when a user navigates to it.

By default, Angular uses lazy loading to load modules only when the user navigates to the corresponding route. However, you can enhance the user experience by preloading certain feature modules as soon as the main application is loaded, before the user actually navigates to them.

Use Case

For large-scale applications that have a significant amount of features and many modules (e.g., a large enterprise app), you may want to preload some modules to minimize the wait time when the user navigates to a different route that requires a heavy module.

How Preloading Works in Angular

Angular provides a built-in preloading strategy mechanism through the PreloadAllModules and NoPreloading strategies, which are configured in the RouterModule. The idea is that you can set a strategy to decide how and when certain modules are loaded after the application has initially bootstrapped.

Preloading Strategy Types

No Preloading (default):
- This strategy does not preload any modules. Feature modules are only loaded when the user navigates to a route associated with that module.
```
ts

RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })
```
Preload All Modules:
- This strategy will preload all lazily-loaded modules after the application has loaded. It can improve performance by loading features that the user might visit soon.
```
ts

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
```
Custom Preloading Strategy:
- You can create your own preloading strategy if you want more control over how and when modules are preloaded. This could be useful for high-volume, large applications where you need to decide which modules to preload based on certain conditions like the user’s roles, network conditions, or route priorities.

Example of Preloading Large-Volume Feature Modules in Angular

Consider a scenario where your Angular application has several feature modules, such as DashboardModule, OrdersModule, UserProfileModule, and AnalyticsModule. These modules might be large and take a significant amount of time to load.

You want to preload certain modules, such as OrdersModule and AnalyticsModule, because they are frequently used, and you want them to be available right after the initial app load. Meanwhile, the UserProfileModule is less frequently accessed and can be loaded lazily when the user navigates to it.

Step 1: Define Routes with Lazy Loading

ts

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) },
  { path: 'user-profile', loadChildren: () => import('./user-profile/user-profile.module').then(m => m.UserProfileModule) },
  { path: 'analytics', loadChildren: () => import('./analytics/analytics.module').then(m => m.AnalyticsModule) }
];

Step 2: Implement Preloading Strategy

You can use PreloadAllModules to preload all lazy-loaded modules, or you can define a custom preloading strategy to selectively preload modules based on certain criteria.

Preload All Modules Example:

In the app-routing.module.ts file:

ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) },
  { path: 'user-profile', loadChildren: () => import('./user-profile/user-profile.module').then(m => m.UserProfileModule) },
  { path: 'analytics', loadChildren: () => import('./analytics/analytics.module').then(m => m.AnalyticsModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this example, all the feature modules will be preloaded as soon as the application loads, reducing the load time when navigating to these routes.

Custom Preloading Strategy Example:

If you want to preload only OrdersModule and AnalyticsModule based on certain conditions, you can create a custom strategy.

First, create the custom preloading strategy (custom-preload.strategy.ts):

ts

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // Example: Preload "Orders" and "Analytics" modules
    if (route.path === 'orders' || route.path === 'analytics') {
      return load(); // Preload the module
    }
    return of(null); // Do not preload other modules
  }
}

Then, update the routing configuration to use the custom preloading strategy (app-routing.module.ts):

ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomPreloadingStrategy } from './custom-preload.strategy';

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) },
  { path: 'user-profile', loadChildren: () => import('./user-profile/user-profile.module').then(m => m.UserProfileModule) },
  { path: 'analytics', loadChildren: () => import('./analytics/analytics.module').then(m => m.AnalyticsModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this setup:

The OrdersModule and AnalyticsModule will be preloaded as soon as the app loads.
The UserProfileModule and DashboardModule will be loaded lazily when the user navigates to their routes.

Benefits of Preloading Modules

Improved Performance: By preloading commonly accessed or critical feature modules, you minimize delays during navigation, resulting in a faster and smoother user experience.
Better Resource Utilization: Preloading can be done during idle time, making the best use of available network resources.
User Experience: Reduces the load time for frequently used features, which is crucial in large-scale applications.

People Who Code | Blog