Best Ways To Preload modules In Angular 9

In this tutorial, we will see what could be the Best Ways To Preload modules In Angular 9. Most of the applications we develop we use the same pattern that is lazy-loading the module i.e. module will be loaded in the browser once it is navigated to that module path.

Why we use lazy-loading?

Using Lazy Loading we can load our application in chunks whenever it is required, instead of loading all modules at once whenever the application is opened.
By using the angular loadChildren with import we are able to go with the lazy-loading approach.

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

But somewhere it can be an issue when it comes to user interaction with the application if the module is a heavy module that contains lots of files and script to be run before it initiated.

So you may have noticed after navigation it takes time to load the next page and after clicking the page looks like the ideal page performing no actions.

How the preloading module works

Initial Module Load

First, it loads the initial bundle, which contains only the components which have bootstrap our application.

Bootstraping Application

Then it will bootstrap the application in small bundles.

Preloading Module

When the application is started user can interact with the application at that time in the background the other module starts loading without interfering with the application.

Preloading Done

Finally, if the user clicks to navigation it will load the module instantly.

So what are Best Ways To Preload modules In Angular 9

A configuration in a routing module which will load the initial module and then preload the module in the background without affecting the user interaction.
We can preload all the module or we can just preload the defined module.

Pre Load All Module

For preloading of all modules is easy as the angular router module has a configuration and we just have to set it.
To enable preloading we need to pass a preloadingStrategy into forRoot.

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];
@NgModule({
  imports: [CommonModule, RouterModule.forRoot(Routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Custom Preloading Strategy

Instead of preloading all the modules, we can specify which module should be preloaded.

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule),
    data: {preload: true}  // Preload only this module
  }
];

We need to have create a CustomPreloadingStrategy class and override its preload method.

export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data.preload ? load() : of(null);
  }
}

The method accepts the two arguments first one accepts the route and the second one is a function that actually does the preloading.
Inside that method will just check the preload property is set or not. if it’s available then it will invoke the load function.

And Finally, we will override the provider and set the preloadingStrategy to CustomPreloadingStrategy.

@NgModule({
  providers: [CustomPreloadingStrategy],
  imports: [RouterModule.forRoot(Routes,
    {preloadingStrategy: CustomPreloadingStrategy})]
})
class AppRoutingModule {}

Conclusion

Angular routing gives us the ability to manage the module and load them in the background in two different ways i.e. Preload all modules or just preload the defined ones.

This feature can be used to optimize the application and make the modules ready before the user access those modules.