I am currently building the Angular Tour of Heroes app and have completed all steps in the guide. I am using a remote server to host the app and connecting to it using Chrome.
However, sometimes after recompiling, Chrome throws an error when trying to reload the app:
GET http://url.domain.com/vendor.bundle.js net::ERR_CONTENT_LENGTH_MISMATCH
It seems it's failing to load the whole bundled app. What I can't figure out is why. Before I've re-saved a file which forces webpack to recompile and the problem goes away temporarily. I've tried reinstalling my node_modules
, that hasn't helped.
The vendor.bundle.js
file is quite large (2.79 MB) but it was previously loading with no problems with file sizes just as big. It's also a relatively small app.
Webpack's output:
Time: 12225ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 178 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 29 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 11.5 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.79 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
Obviously running the dev server.
I have also tried creating a brand new app with ng new ...
and have the same problem with the new app.