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

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.

enter image description here


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:

enter image description here

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.