How to check if Angular Module Lazy Loading works on Chrome?

Question

How do you check if the js files are lazy loaded for the module opened using Chrome dev tools?

Solution 1

According to Angular's Lazy Loading guide:

You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing Cmd+Option+i on a Mac or Ctrl+Alt+i on a PC and go to the Network Tab.

Once you make an action that loads a module lazily, you should be able to see a Chunk getting loaded in the Network Tab. Something like this:

NOTE: Another important check is to make sure that a module loaded lazily is not loaded again. To confirm, move to a different route and then click on the Action again, and this time it won't make a network call to load the chunk since it has already been loaded.

Solution 2

To make sure Lazy Loading is working. In chrome,

Step 1 - open developer tools by pressing F12 or Ctrl + Shift + i

Step 2 - click the Network tab.

When you navigate to the lazy URL, you should see a 0.chunk.js file rendered.

Solution 3

besides the other answers which is correct, you can use Augury tool to determine which module and component loaded lazily, Angular Augury is A Chrome and Firefox Dev Tools extension for debugging Angular applications.

• after you install it and run your angular app you can go to your developer tools and click on Augury tab it will show you Component Tree at first like this:

• you then click on Router Tree tab and that is the interesting part which shows you which module/component is loaded dynamically and which is loaded lazily as following:

Augury also helps Angular developers visualize the application through component trees, and visual debugging tools. Developers get immediate insight into their application structure, change detection and performance characteristics.

Comments

[Cold Cerberus]

Wow! Thank you. does that mean that if I have two lazy loaded modules importing a , let's say, MatButtomModule, Angular automatically handles it by not reloading it even if I programatically added it on both lazy loaded modules?

[Cold Cerberus]

Thanks so much. I haven't actually checked on angular.io/guide/lazy-loading-ngmodules#confirm-its-working cuz I just discovered I was implementing such lazy loading by just following/copying existing implementations from other projects/boiler plates.

[SiddAjmera]

That depends. Ideally one would create an AppMaterialModule where one would export all the module the App would use. Then one would import this AppMaterialModule in a SharedModule. And then this SharedModule would then be imported in the LazyLoadedModules. Now since the SharedModule would have been loaded earlier(probably because of some module that loaded it eagerly), Angular won't load it again as it doesn't have a need to as it already has it.

[Cold Cerberus]

Exactly. This use case makes it better to avoid repetitive imports. Though technically we're still going to repetitively import the SharedModule in all the lazy loaded modules, at least the code is minimal. Thank you.