How to Build Custom Preload Strategies in Angular

In this post, we will see how to build a custom preload strategy for Angular. Lazy loading modules can help improve the performance of your Angular application by only loading the modules that are necessary for the current view.

By default, Angular uses the PreloadAllModules strategy to preload all the lazy-loaded modules. However, this might not always be the best option for your application. In this blog post, we’ll explore how you can build a custom preload strategy in Angular to load your modules in a different way based on your specific use case.

Custom Preload Strategy Angular Examples

The first step to building a custom preload strategy is to create a new service that implements the PreloadStrategy interface. This interface has only one method, preload(), which takes a Route and a Function as arguments.

Next, in the preload() method, you can define your own logic for when and how to preload each module. For example, you could check the user’s network speed, or you could preload a module only when the user navigates to a specific route.

Once you have defined your custom preloading logic, you need to register your new CustomPreloadStrategy service in the RouterModule.forRoot() method in your AppModule.

Here’s an example implementation of a custom preloading strategy based on network speed:

Example 1: Network Speed

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

@Injectable({
  providedIn: 'root'
})
export class CustomPreloadStrategy implements PreloadingStrategy {
 preload(route: Route, fn: () => Observable): Observable {    
    const slowNetwork = navigatorWithConnection.connection && ['slow-2g', '2g'].includes(navigatorWithConnection.connection.effectiveType);
    if (slowNetwork) {
      return of(null);
    }
    return fn();
  }
}

interface ExtendedNavigator extends Navigator {
  connection: any;
}
const navigatorWithConnection: ExtendedNavigator = navigator as ExtendedNavigator;

In this example, we are using the navigator.connection API to check the user’s network speed. If the user is on a slow network, we return an observable that emits null, which effectively prevents the module from being preloaded. If the user is on a fast network, we call the fn() function to preload the module.

Example 2: User Actions

You can preload a module only when the user takes a specific action, such as hovering over a link or button. For example, you could add a data-preload attribute to links or buttons that you want to preload.

preload(route: Route, fn: () => Observable<any>): Observable<any> {
  const shouldPreload = route.data && route.data['preload'];
  if (shouldPreload) {
    return fn();
  }
  return of(null);
}

In this example, we are checking for an data-preload attribute in the route data. If the attribute is present, we call the fn() function to preload the module. If the attribute is not present, we return an observable that emits null.

The final part is to provide this in the main app routing.

1. Open the app-routing.module.ts file in your Angular project.
2. Import the PreloadAllModules preloading strategy from @angular/router by adding the following line at the top of the file:

import { PreloadAllModules } from '@angular/router';

Update the RouterModule.forRoot() method to include the preloadingStrategy option and set it to PreloadAllModules. This will preload all lazy-loaded modules after the initial app load:

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

These are just a couple of examples of custom preloading logic that you can implement. Depending on your specific use case, you may want to implement different logic to determine when and how to preload your modules.

Save the changes to the app-routing.module.ts file and run your Angular app.

With these steps, Angular will preload all of the lazy-loaded modules in your app after the initial load, improving the user experience by reducing the time it takes to navigate to different parts of your app.

For more details, visit the official site of Angular

Application Source Code @ LearnSmartCoding GitHub

Check out other topics that might interest you.

• How to Use Multiple Angular AuthGuards in canActivate | Step-by-Step Guide
• Angular Custom Directives: A Beginner’s Guide with Real-Time Scenario
• Upload Files and Model Data with Angular and .NET Core Web API to Single Endpoint
• Boosting Performance in Your .NET Core Application with Caching
• How to solve Http Error 500.19 Internal Server Error in windows server IIS for Dotnet Core application

Conclusion:

Custom preloading strategies can help you optimize the performance of your Angular application by loading only the modules that are necessary based on your specific use case. By creating a new service that implements the PreloadStrategy interface, you can define your own logic for when and how to preload each module. Whether you choose to preload modules based on network speed, user actions, or some other factor, building a custom preload strategy in Angular is a great way to improve the user experience and overall performance of your application.