How can I check or prove that a module in angular2 is lazy loaded? How can I check or prove that a module in angular2 is lazy loaded? angular angular

How can I check or prove that a module in angular2 is lazy loaded?


Check the Network tab of chrome dev tools (ctrl + shift + i) in the Google Chrome browser.

If your module is not being lazy loaded you will see a row for the module in the network tab when the site first loads up.

If it is being lazily loaded properly then you will see the row for the module only when you navigate to the corresponding route.

Hope this helps.


Background Concept:First of all, one thing needs to be clear about lazy loading. When you lazy load, it basically loads your module lazily in Memory (RAM) not from network or server. Module (js script) already present in Browser cache (HD) - got from network during app loading. Thus by lazily loading particular module helps in memory optimization, not network optimization.

How to check: Just put a console.log in constructor function of the module class definition

import { NgModule } from '@angular/core';import { LazyComponent } from './lazy.component';import { LazyService } from './lazy.service';@NgModule({  imports: [ ],  declarations: [ LazyComponent ],  providers: [LazyService]})export class LazyModule {  constructor() {    console.log('Lazily Loaded : LazyModule');  }}


You can check if your module is being loaded as lazy or non-lazy fashion . Just do Inspect element(right click mouse in browser) or Ctrl+Shift+I , go to network tab and see you are able to see chunk.js file in the network calls. if yes , your module is being loaded in lazy manner.