Lazy Loading a Module in Angular

Posted By : Manisha Kirodiwal | 30-Oct-2018

Lazy loading modules help us reduce startup time. Any application does not need to load all at once, what the user expects to see when the app first loads it only needs to load. When the user navigates to their routes, modules that are lazily loaded will only be loaded then.

In our example navigation system has main two paths one is eager and second one is lazy. To know what the paths are doing when they click on them, we need to look at the route function we passed to root module.

    
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { EagerComponent } from './eager.component';

const routes: Routes = [
  { path: '', redirectTo: 'eager', pathMatch: 'full' },
  { path: 'eager', component: EagerComponent },
  { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

eager is the default path here which will load EagerComponent.

But here you can see that whenever we go to the path lazy, we are trying to lazy load a module called LazyModule. Here is the definition of that route:

    
 { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }

There are some important points to note here:

  • Here we are using property loadChildren, not using component.
  • We send a string here not sending a symbol to avoid loading the module eagerly.
  • Here we define the class name not only the way to the module.

Here it is important that LazyModule has its own routing and a component called LazyComponent.

    
import { NgModule } from '@angular/core';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
  imports: [routing],
  declarations: [LazyComponent]
})
export class LazyModule {}
            

Here LazyModule class is the default export of the file so we do not need to define the name of the class in the loadChildren property.

Here routing object is a simple object which only explains the default component. This default component load when redirecting to the lazy path.

   
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);
        

Note that we use the method forChild rather of Root to create the router object. We always do this by establishing a routing function for a function module, regardless of whether the module should be eager or easily charged.

When we load the app for the first time, AppModule is loaded into the browser along AppComponent, and we should see the navigation system and the text "Eager Component". Until this time, LazyModule is not downloaded, only when we click on the link "Lazy", the required code is downloaded and we display the message "Lazy Component" in the browser.

About Author

Author Image
Manisha Kirodiwal

Manisha is a Web Application developer and she is good in working with Angular, TypeScript , JavaScript and Jquery. In free time she loves to dance and cooking.

Request for Proposal

Name is required

Comment is required

Sending message..