How to pick which Angular Bundle to Preload ?

Last Updated : 23 Dec, 2020

Loading strategy in angular decides how to load the app modules when the application runs into the browser. In Angular, we have three types of loading: Eager loading, lazy loading, and preloading. By default, Angular follows eager loading i.e. as soon as the application starts downloading in the browser, the modules start to load within the browser. You can also set some modules to be lazy-loaded i.e. the modules will not start loading until they are explicitly called.
Besides these two loading strategies, we have 3rd type of loading i.e. preloading strategy. Before determining which module to preload, let's first understand what is preloading in angular.

In preloading, we explicitly tell Angular compiler which lazy loaded modules that we want to prerender first i.e. In preloading we define some modules to be preloaded as soon as the main modules finish loading to avoid the delay of the rendering of lazy loaded modules for better user experience.

There are various scenarios on which we decided which modules should be preloaded.

If the module size is too big, we generally decided to load such modules to preload because when the user calls such modules, they are either complete loading or complete partial loading so that the user doesn't have to wait.
The modules which are frequently used in the application are also set to be preload to avoid the delay time.

So, these are some important conditions over which you can decide which lazy loaded modules should be loaded as preload.

Now, let's understand how to implement preloading in the angular application.

There are two ways to do so first we can preload all the lazy loaded modules and second, we can define specific lazy modules to preload.

All lazy modules to load as preload (preloadingStrategy : PreloadAllModules):

AppRoute.ts:

JavaScript

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


const routes: Routes = [
    {
        path: 'user',
        loadChildren: () => import('./user/user.module')
            .then(m => m.UserModule)
    },
    {
        path: 'orders',
        loadChildren: () => import('./orders/orders.module')
            .then(m => m.OrdersModule)
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

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

export class AppRoutingModule { }

UserComponent.ts:

JavaScript

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit, OnDestroy {

  constructor() { }

  ngOnInit() {
  Console.log("Loading started......");
  }

  ngOnDestroy() {
  }

}

OrderComponent.ts:

JavaScript

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  Console.log("Order Loading started......");
  }


}

Output: When you go to the network tab under the developer options, you will see that as soon as your bootstrap component gets loaded, all other modules both user and order also start loading, this is preloading of all the modules.

As you can see both orders and users module start loading

Specific lazy module to load as preload (data : {preload: true}):

AppRoute.ts:

JavaScript

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


const routes: Routes = [
    {
        path: 'user',
        loadChildren: () => import('./user/user.module')
            .then(m => m.UserModule),
        data: { preload: true }
    },
    {
        path: 'orders',
        loadChildren: () => import('./orders/orders.module')
            .then(m => m.OrdersModule)
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

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

UserComponent.ts:

JavaScript

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit, OnDestroy {

  constructor() { }

  ngOnInit() {
  Console.log("Loading started......");
  }

  ngOnDestroy() {
  }

}

OrderComponent.ts:

JavaScript

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  Console.log("order Loading started......");
  }
}

Output: In the above example, we have set preload true for only the user component among all other lazy loaded components. Now if you go to network tab under developer option or in the below screenshot, you will see after bootstrap component gets loaded, only the user component starts loading but order Component doesn't start loading until we go to that component explicitly. So, this is the preloading of custom component.