Fast apps are required on the internet at the age of information.

There are multiple techniques and strategies to build fast apps, one of them is getting the app JavaScript bundles to users’ browsers as quickly as possible. In Angular 8/9, there are many ways to do that!

You can instruct Angular to preload your bundles. You can even specify which of your bundles you want preload.

You can either use a built-in or making a custom preload strategy.

In this post, we’ll see by example how to preload your Angular 8/9 bundles.

Preload All

By default, Angular doesn’t preload any bundles. But you can easily change that using the built-in preload strategy PreloadAllModules.

Provided that you have configured the router in your project in the src/app/app-routing.module.ts file, simply update is as follows:

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

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

We simply need to provide an options object with the preloadingStrategy to the forRoot() function.

If you are not satisfied with the built-in preload strategy you can create a custom Angular preloading strategy.

If you need to increase the performance of your Angular application use route-level code-splitting:

First, choose the right preloading strategy depending on the size of your application:

• If the app has only a few modules, you can use Angular’s built-in PreloadAllModules strategy.
• If the appl has many modules, you need to use a custom preloading strategy, such as the Angular’s quicklink, or predictive preloading (Guess.js).

Next, you need to configure the preloading strategy by setting the preloadStrategy property of the Angular router.

#angular8 #angular #angular-9 #preloadallmodules