Users want fast apps. Getting your JavaScript bundles to your browser as quickly as possible and before your user needs them can make a huge and positive impact on their user experience. Knowing how you can improve that experience is important.

One way you can improve user experience with your Angular apps is to strategically decide which bundles to preload. You control when your bundles load and which bundles load. This is why you should explore choosing a built-in or creating your own custom Angular preload strategy.

In this series we'll explore a few of your options for preloading Angular bundles.

Here are the articles in this series

• Preload all Angular Bundles
• You Pick Which Angular Bundles to Preload
• Preload Angular Bundles When Good Network Connectivity is Detected
• Predictive Preloading Strategy for Your Angular Bundles

Preload All

Out of the box Angular's default preload strategy is to not preload. So if you want to preload you must change that behavior.

You can tell Angular to preload all of the lazy loaded modules in advance by using the built-in preload strategy PreloadAllModules. Simply import this from @angular/router as shown below.

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

Then when setting up your RouterModule, pass the router options including the preloadingStrategy to the forRoot() function.

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

Try It

Now rebuild and run your app with ng serve. Open your browser, open your developer tools, and go to http://localhost:4200. When you inspect the Network tab in your browser you will see all of your bundles already preloaded.

Now when you navigate to your lazy loaded bundles you will see that they are already loaded, so the experience is fast. If you wish to really see this make a difference, enable throttling in your developer tools to a slower connection such as 3G, then refresh the page. The preloading will be much more visible now in the Network tab.

Deciding What Is Right For Your App

Now that you know how to use the built-in PreloadAllModules strategy, how do you evaluate if this is the right strategy for your app? Well, this depends on your situation.

If your app has several bundles from lazy loading and all are large, these will all start transferring to your browse as your app loads. You don't control which ones load first, so if a user clicks on a route chances are that it won't be the first one preloaded.

What if your users rarely ever go to some of these routes? Does it make sense to preload them all up front?

If you feel the users could benefit from the routes all loading up front, this may be a good choice.

In the end the decision is up to you. I recommend before choosing this options, or any preload strategy, that you test at various network speeds under various valid and common user workflows. This data will help you decide if this is the right strategy for you, or if another may be more beneficial for users of your app.

Resources

• Get VS Code
• Get the VS Code Angular Essentials
• Get the VS Code Angular Snippets