Menu
I have implemented lazy-loading in my Angular Application (using CLI 7.3.4)
Its compiling successfully but when I route to a lazy-loaded module (say module1 path), its loading one more chunk which is actually other lazy loaded module (Module2) path.
Chunk Name: "../default~lazy-load-modules-module1-module1-module~lazy-load-modules-module2-mo~be6d77c5.js"
I am unable to understand why this default ~ is getting generated.
I am expecting to load modules only when one of its component is invoked.
370
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. NOTE: Another important check is to make sure that a module loaded lazily is not loaded again.
Lazy loading is the process of loading components, modules, or other assets of a website as they're required. Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be loaded as well.
Lazy loaded routes need to be outside of the root app module. You will want to have your lazy loaded features in feature modules. First, let's use Angular CLI to create a new project with Angular Router: ng new angular-lazy-loading-example --routing --style=css --skip-tests.
Lazy loading is a technique that allows you to load JavaScript components asynchronously when a specific route is activated. This ensures that when the application is loaded for the first time, only the required modules are loaded and utilized.
Its just means the generated chunk belongs to both module1 and module2.
I believe you had an shared module. If yes, then this is chunk of that module.
Please let me know if you want further information.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
