Open In App
Related Articles

How to preload all Angular Bundles ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.

Flow for pre-loading the modules

Approach: Basic Approach is to set preloading Strategy as 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.ts 
    Syntax:

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] })

  • 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

Example: Here is an example of what app-routing.module.ts that will look like this. 

javascript

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:


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 09 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials