I'm using a remote server for development of an Angular app (v4.4.3). The server is being served remotely for development and being accessed through a local browser. I.e.
ng serve --host URL --port 8080
It produces the following output:
Hash: 4691491fe6185644edc3 Time: 10717ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 183 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 12 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 147 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.49 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
Sometimes, it will start failing to load on the client:
GET http://[URL]:8080/vendor.bundle.js net::ERR_CONTENT_LENGTH_MISMATCH
> Uncaught TypeError: ...
This then persists. Sometimes, changing the code cause it to start working again. It goes away if I create a new project and copy the old files across, rebuilding it from scratch. It has happened on a number of projects, including the Tour of Heroes tutorial. Building the project for production and serving it via Apache works without any problems.
I'm not doing anything special with the app, or loading any particular node packages. From what I can tell, it happens randomly. It seems to be caused by timing out while trying to download the bundles and not having loaded everything (thus having a mismatch of content length).
I have tried the following things:
- Flushing
node_modules
- Reverting to a previous version of the project (git)
- Restarting the server
It is not caused by the following:
- Permissions (it was working fine before a minor change)
- Nginx in general (I'm not using it?)
- Express
The only two things it could possibly be are:
- My server, but it only has this problem with Angular
- Angular, but I have no idea where. I've essentially reset it through a
git checkout
to an older, functioning version.