Repository navigation
Lazy Loading duplicates HTML code across chunks #3410
Description
OS?
OSX El Capitan
Versions.
tried both beta.21/2.2.1 and beta.22/2.2.3
Repro steps.
I created a few lazy loaded modules for each section of my application. In ng serve or ng build, the app generates 0..chunk.js, 2..chunk.js, 3..chunk.js, and so on.
In a few if not all the none-zero chunk.js, I see the HTML code in its respective module. In 0...chunk.js, these same HTML code is present. That is, all the non-zero chunk's HTML code is also present in chunk 0. Chunk 0 has an enormous size, around the combined size of all the other non-zero chunks.
This issue shows up whether AoT is enabled or not. (though AoT is worse, since the html code gets pre-compiled to this.renderer('<div>'...) code, multiplying its size.
Activity
hansl commentedon Dec 5, 2016
@aaronleeucla I don't see this here with my project (4 lazy routes, using beta 22-1). I'm trying to investigate further but if you could provide an actual repro project that would be great.
aaronleestic commentedon Dec 6, 2016
@hansl Thanks for looking into this. I did some more investigation and it looks like this bug only appears when I import and use https://github.com/valor-software/ng2-bootstrap 's DatePicker module in my lazy module/chunk 0. Once I remove that import and comment out the
<datepicker>tag, and restartng serve, the duplicates are gone. However, before restarting myng serveprocess reloads and says the app is VALID, yet when I visit the lazy route, I get a network 404 when the framework tries to fetch14.undefined.chunk.jsThis may or may not be an Angular CLI issue, I am unsure.On a related note, are there any official guides on how to properly code and export a module that is lazy-load and/or AoT compatible?
aaronleestic commentedon Dec 6, 2016
was able to reproduce in repo project: https://github.com/aaronleeucla/angular-cli-lazy-load-bug-repro.
aaronleestic commentedon Dec 6, 2016
Found the culprit! It is an angular-side bug! Related to #2496; any use of
import * as moment from 'moment'in a lazily loaded module will make this bug show up. It doesn't even have to be caused by datepicker (which internally has that import). I investigated more, commented out datepicker, and concluded that just putting that moment import anywhere in a module, lazy or eager, will cause all other chunks code to be pulled into the same module.In the case of #2496, the import was in the eager module, causing the CLI to not split code into chunks. In this case, all chunks' code got duplicated.
andrelmp commentedon Dec 14, 2016
@aaronleeucla had the same issue few days ago, exactly with moment.js
I solved importing moment.js on angular-cli.json and declaring moment on typings.d.ts
aaronleestic commentedon Dec 20, 2016
@andrelmp that workaround is not feasible if the moment is declared in another imported npm dependency. filipesilva assigned @hansl that bug 28 days ago, and this one is somehow related to it.
M-Adoo commentedon Dec 26, 2016
I had the same issue with
three.js. Found if use a 3rd js library in lazy load module and not import this 3rd library in AppModule or cli script, then this issue shows up.I import
threein AppModule work well. But i really want bundlethreein my lazy load module.filipesilva commentedon Jan 24, 2017
Dupe of #2496, fixed in #4153
angular-automatic-lock-bot commentedon Sep 6, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.