How do you check if the js files are lazy loaded for the module opened using Chrome dev tools?
1
-
stackoverflow.com/questions/42459326/…Nishan Dhungana– Nishan Dhungana2019-02-04 07:27:47 +00:00Commented Feb 4, 2019 at 7:27
Add a comment
|
4 Answers
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.
3 Comments
Alex Pappas
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?
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.Alex Pappas
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.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.
1 Comment
Alex Pappas
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.
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.
1 Comment
ahong
Augury is nice, but it is deprecated now and no longer listed in the Chrome Web Store. Seems like it is replaced with angular.dev/tools/devtools, but seems like there is not feature parity.
There are many ways to check this out.
After ng serve, chunk of modules (for which lazy-loading is applied) will be display in terminal. image showing chunk of file
Angular augury under Router Tree, it will show ([lazy]) for the lazy loaded modules. But make sure you have not imported that modules in app.module.ts or imported independent module unnecessarily, because it will load those file (read point 3)
In web developer tools look for file/component (for which lazy-loading is applied). If the file is present even before loading of the module then lazy loading is not working (component shouldn't be visible before module is loaded). The same file will be shown after that module has been loaded.
let's say project contain one modules -> abc.module.ts abc.module.ts contains two component abc1.component.ts and abc2.component.ts If lazy loading is working then abc1 and abc2 shouldn't be shown in the search result on searching files in web developer tools (before loading of abc module). After loading of abc module, if you again search it should be shown.
