0

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.

Druckles
  • 3,161
  • 2
  • 41
  • 65

0 Answers0