How to pick which Angular Bundle to Preload ? - GeeksforGeeks

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.
As you can see only the user module starts loading, the order module doesn’t.
So, in this way, we can load some or all of the lazy modules as preload.
AngularJS-Misc
Picked
Technical Scripter 2020
AngularJS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills