Angular 8 - GET styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) when served over USB

Question

I am using ng serve to run an Angular 8 project locally. The total bundle size is around 7 MB, and it loads with no trouble on the desktop machine where it's hosted.

However, when connecting a phone via USB and using port forwarding (for localhost:4200), the website frequently fails to load completely. The error reported by Chrome is:

GET http://localhost:4200/styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

This error was logged in https://github.com/angular/angular-cli/issues/7197, and is now marked as resolved. However, even with Angular CLI and NodeJS both up-to-date (Angular CLI v8.3.18 using Node v10.15.0) the error persists. It appears to be caused by the Angular Live development server timing out while serving its assets.

It occurs at random, but especially after a code change it can occur over 90% of the time. Reloading the site and re-running ng serve do not generally fix the issue. It appears to occur more frequently on browsers other than Chrome.

If the error is caused by a timeout in the Angular development server, how can I increase that timeout? If not, how can I prevent this error?

https://stackoverflow.com/questions/25993826/err-content-length-mismatch-on-nginx-and-proxy-on-chrome-when-loading-large-file — junlan, Nov 15 '19 at 15:48
@junlan The linked question is about an nginx server hosting the application. Angular CLI's `ng serve` does not use nginx. — Alex Walker, Nov 15 '19 at 16:54
I am facing same issue and could you share the solution you found — user3211705, Oct 10 '20 at 11:25
Sadly we never found a solution - we just had to live with it. — Alex Walker, Oct 12 '20 at 12:10

Julio Cesar Brito Gomes · Answer 1 · 2021-04-20T16:07:32.950

0

A temporary solution that is working for me is refresh the page multiple times until the vendor.js and main.js files are downloaded.

edited Apr 20 '21 at 16:07

answered Apr 20 '21 at 15:54

Julio Cesar Brito Gomes

544
7
14

gaborous · Answer 2 · 2023-01-27T06:28:59.007

This issue took me a while to debug and to fix, hopefully this can help someone else. This bug appeared with NodeJS v8, and it still happens with Angular 14 and nodeJS 18.

This issue happens because the download speed of your device is limited, and the server raises a timeout to break the connection before the necessary angular js files are downloaded. This issue can happen over USB but also inside the Android Studio AVD emulator (my case). It can be reproduced artificially on a desktop computer by using the Chrome browser DevTools > Network > enable "Disable Cache" and set "Throttling" to "Slow 3G", then try to access your locally served webapp.

The major issue is that ng serve does not offer a way to manually set the timeout, so it is set to a constant time for all. As is written in the github issue you linked to, there used to be a workaround but only for nodejs 8, which was since then dropped and anyway never applied to any further versions, so it was only a temporary fix.

The solution is to serve the Angular web app manually, so that you can either:

minify js files, so that they are small enough to be downloaded fast.

ng serve --configuration production --watch

In angular.json, the production configuration should be something like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myproject": {
      "architect": {
        "build": {
          "configurations": {,
            "production": {
              "baseHref": "",
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                },
                "fonts": true
              },
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": false
            }
          }
        }
      }
    }
  }
}

serve the pre-built app using your own server (not ng serve), so that you can disable timeouts.

In one terminal, launch the following to build the app and monitor changes:

ng build --watch

In a separate terminal (while the first one is running), launch the HTTP server with the following (-t0 disables timeouts):

http-server ./dist -p <port> -t0

PS: if you are trying to access the Angular app from inside the Android emulator, make sure to either use the WebView Browser Tester app, or enable the network permission to access HTTP cleartext addresses for your Android app.

Angular 8 - GET styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) when served over USB

2 Answers2