How to preload all Angular Bundles ?

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: