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

Question

If I have access to an angular2 application\'s code and there is a module that is supposedly lazy loaded, is there a way, independent of examining the code, that I can test that

Answer 1

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.

Answer 2

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');
  }
}

Answer 3

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.