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?

Answer 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.

Answer 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.