As promised, this is the second part of this article, where we have discussed about different module loading strategies and which one to use. Now in this article we will go through the code examples on how to configure them in your angular application. So, let your code editors open and follow along ;)

Before starting, lets create a new angular application.

Note: I am assuming at this stage you have already installed required packages and Angular CLI to run angular locally.

Open your command prompt and cd into the required folder in which you want to create a new angular project. Now, run the below command and press Enter.

ng new DemoAngularProject

Make sure you choose Y when it asks for Would you like to add Angular routing?

I am omitting the remaining steps like creating new modules and components as its not under the scope of this tutorial. But you can visit this nice article to know about different CLI commands.

Folder Structure

1. Configure Eager Loading

As I already mentioned in the Part 1 of this tutorial, Eager Loading is nothing but loading all modules on the application start. So, basically there is nothing we need to do in order to configure it, as it will be available out of the box as soon as you create a new angular application using ng new cli command.

const routes: Routes = [
{
    path: 'eager-loading', component: EagerHomeComponent, children: [
      { path: 'child1', component: EagerChild1Component },
      { path: 'child2', component: EagerChild2Component },
      { path: '**', redirectTo: 'child1' }
    ]
  },
  {
    path: 'eager-loading2', component: EagerHome2Component, children: [
      { path: 'child3', component: EagerChild3Component },
      { path: 'child4', component: EagerChild4Component },
      { path: '**', redirectTo: 'child3' }
    ]
  }
]

If you can see in the above code snippet from app-routing.module.ts file, we have EagerLoadingModule and EagerLoadingModule2 as two eagerly loaded feature modules under AppModule(root). If we configure routes to them as shown in the above code-snippet, the two modules will be eagerly loaded.

1. Configure Lazy Loading

Lazy Loaded modules are loaded on demand when the user navigates to the routes in those respective modules. The configuration for lazy loading of feature modules is as shown in below snippet.

const routes: Routes = [
 {
    path: 'lazy-loading',
    loadChildren: './features/lazy-loading-module/lazy-loading.module#LazyLoadingModule',
  },
  {
    path: 'lazy-loading2',
    loadChildren: './features/lazy-loading-module2/lazy-loading-module2.module#LazyLoadingModule2'
  }
]

We have LazyLoadingModule and LazyLoadingModule2 as two lazy loaded modules in the application, as you can see in the above code-snippet, to configure the modules to be lazily loaded, we need to provide path attribute to where it should route to. For a change instead of component attribute, we have to use loadChildren and provide that path to the module.

Another important point to remember is, we should not put the Lazy Loaded modules (and Pre Loaded) in the imports array in root module file, i.e., app.module.ts file.

1. Configure Pre Loading

Preloading in Angular means loading the Lazy loaded Modules in the background asynchronously, while user is interacting with the app. This will help boost up the loading time of the app.

By Lazy loading the modules, we can reduce the initial download size of the app, and thus making app load quickly. This is very useful in case of big apps. But when user navigates to a lazy loaded part of the app, the angular will have to download the module from the server, which means that user will have to wait for the download to finish.

By Preloading the lazy loaded module, the user do not have to wait for the module to be downloaded as the module is already downloaded in the background.

How to Enable Preloading?

To make use of Preloading, first we need to enable lazy loading of the Modules. Mark the modules with the loadChildren, when you define routes as shown below. The angular will lazy load those modules.

const routes: Routes = [
 {
    path: 'pre-loading',
    loadChildren: './features/pre-loading-module/pre-loading.module#PreLoadingModule',    
  }
];

And then, you can enable preloading by using the preloadingStrategy: PreloadAllModules, while registering the routes using the forRoot method.

RouterModule.forRoot(routes,{ preloadingStrategy: PreloadAllModules })

Preloading Strategies

There are few sub types of Pre Loading, they are:

1. NoPreloading
2. PreloadAllModules
3. Custom preloading strategy

The Angular provides two built in strategies out of the box. one is PreloadAllModules and other one is NoPreloading

1. NoPreloading

This will disables all the preloading. This is default behavior i.e. if you don not specify the preloadingStrategy, then the angular assumes you do not want preloading.

RouterModule.forRoot(routes,
   {
      preloadingStrategy: NoPreloading
   }

2. PreloadAllModules

This strategy will preload all the lazy loaded modules.

RouterModule.forRoot(routes,
   {
      preloadingStrategy: PreloadAllModules
   })

3. Custom preloading strategy

With PreloadAllModules all the modules are preloaded, which may actually create a bottleneck if the application has large no of modules to be loaded.

The better way strategy would be:

1. Eagerly Load the modules required at startup. For Example authentication module, core module, shared module etc
2. Preload all frequently used modules, may be after some delay
3. Lazy load remaining modules

To selectively preload a module, we need to make use of custom preloading strategy.

First create a class, which implements the built in PreloadingStrategy class

The class must implement the method preload(). In this method, we determine whether to preload the module or not. The method signature is as follows

const routes: Routes = [
export class CustomPreloadingStrategy implements PreloadingStrategy{

    preload(route: Route, loadModule: Function): Observable<any> {
        return route.data && route.data.applyPreload ? loadModule() : of(null);
    }
}

The first parameter is the active Route. We can use this to extract the information about the route, which is being is loaded.

The second parameter is Observable function, which we need to return if we want to preload this module. We can return Observable of null, if we do not wish to preload the module.

The following is a simple example of the preload method, which checks if the route has preload data defined. If defined it will return the applyPreload parameter, which will preload the module. If not then of(null) is returned indicating that the preload is not required.

const routes: Routes = [
{
    path: 'pre-loading',
    loadChildren: './features/pre-loading-module/pre-loading.module#PreLoadingModule',
    data: { applyPreload: true }
  },
{
    path: 'pre-loading2',
    loadChildren: './features/pre-loading-module/pre-loading.module#PreLoadingModule',
    data: { applyPreload: false }
  },
]

So, we have come to an end of a long tutorial. In this tutorial you have learned how to setup different module loading strategies in angular. To read the first part of this tutorial, please visit this link .