How to preload all Angular Bundles ? - GeeksforGeeks

05 Jun, 2020
Introduction to pre-loading: The introduction of the Lazy Loading feature in Angular greatly improved the performance of the application. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times. But, the main problem with lazy loading was that when the user navigates(or reaches) the lazy-loadable section of the application, the router has to fetch the required modules from the server, which can take time.
So, even though the initial loading time for application is reduced ultimately the user will have to wait for some time till router fetches that specific module. To solve this issue, Angular came up with the concept of preloading. With this feature, the lazy-loadable modules are preloaded and thus the user doesn’t have to wait for it to be fetched. This preloading takes place when the user is interacting with the application that is already loaded during lazy-loading.
Approach: Basic Approach is to set preloading Strategyas that we need. We need to specify that we will be preloading all the modules by explicitly mentioning in app-routing.module.ts
abstract class PreloadingStrategy {abstract preload(route: Route, fn: () => Observable): Observable}
Steps: To preload all the modules, simply follow the steps below:
Add an import statement for PreloadAllModules from app-routing.module.tsSyntax:import { NgModule } from ‘@angular/core’;import { RouterModule, Routes, PreloadAllModules } from ‘@angular/router’;
import { NgModule } from ‘@angular/core’;import { RouterModule, Routes, PreloadAllModules } from ‘@angular/router’;
While setting up the RouterModule in app-routing.module.ts, pass the router options including the preloadingStrategy to the forRoot() function.This will tell the router to set the preloading strategy to preload all the modules.Syntax:@NgModule({imports:[RouterModule.forRoot(appRoutes, { preloadingStrategy : PreloadAllModules})],exports:[RouterModule]})
@NgModule({imports:[RouterModule.forRoot(appRoutes, { preloadingStrategy : PreloadAllModules})],exports:[RouterModule]
})
Now run ngserve in Angular CLI to rebuild your app. Open http://localhost:4200. Right Click to inspect elements(or Ctrl+Shift+I) and go to Network tab to see the result.Syntax:ng serve
ng serve
Example: Here is an example of what app-routing.module.ts that will look like this.
import { NgModule } from '@angular/core';import { RouterModule, Routes,     PreloadAllModules } from '@angular/router';  import { ListComponent } from         './list/list.component';import { DetailComponent } from         './detail/detail.component';import { AppComponent } from './app.component';import { PageComponent } from './page/page.component';import { NewComponent } from './new/new.component';  const appRoutes: Routes = [    { path: '', redirectTo: '/contact',            pathMatch: 'full' },                  { path: 'contact', component: ListComponent },    { path: 'details/:id', component: DetailComponent },    { path: 'new', component: NewComponent },    { path: 'not-found', component: PageComponent },    { path: '**', redirectTo: '/not-found' }]  @NgModule({    imports: [RouterModule.forRoot(appRoutes,        {            preloadingStrategy: PreloadAllModules        })],    exports: [RouterModule]  })export class AppRoutingModule {  }
Output:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (focus) Event
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?