NodeJS Angular 8 -通过USB提供时,获取styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200(正常)

ilmyapht  于 2023-01-30  发布在  Node.js
关注(0)|答案(2)|浏览(145)

我正在使用ng serve在本地运行一个Angular 8项目,包的总大小大约是7MB,在托管它的桌面计算机上加载它没有任何问题。
但是,当通过USB连接手机并使用端口转发(对于localhost:4200)时,网站经常无法完全加载。Chrome报告的错误是:

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

此错误记录在https://github.com/angular/angular-cli/issues/7197中,现在标记为已解决。但是,即使Angular CLI和NodeJS都是最新的(Angular CLI v8.3.18使用Node v10.15.0),错误仍然存在。这似乎是由于Angular Live开发服务器在服务其资产时超时造成的。
这种情况是随机发生的,尤其是在代码更改后,超过90%的情况下会发生这种情况。重新加载网站并重新运行ng serve通常无法解决此问题。这种情况在Chrome以外的浏览器上出现的频率更高。
如果错误是由Angular开发服务器的超时引起的,我怎样才能增加超时?如果不是,我怎样才能防止这个错误?

sg3maiej

sg3maiej1#

对我来说,一个临时的解决方案是多次刷新页面,直到vendor.js和main.js文件下载完毕。

vnzz0bqm

vnzz0bqm2#

这个问题花了我一段时间来调试和修复,希望这能帮助其他人。这个bug出现在NodeJS v8上,现在仍然发生在Angular 14和nodeJS 18上。
发生此问题的原因是设备的下载速度有限,并且服务器在下载必要的Angular js文件之前会引发超时以中断连接。此问题可能在USB上发生,也可能在Android Studio AVD模拟器内部发生(我的情况)。它可以通过使用Chrome浏览器DevTools〉Network〉启用“禁用缓存”并将“Throttling”设置为“慢3G”,然后尝试访问您本地服务的Web应用程序。
主要的问题是ng serve没有提供手动设置超时的方法,所以它被设置为一个恒定的时间。正如你链接到的github问题中所写的,曾经有一个解决方案,但只适用于nodejs 8,从那时起就被删除了,无论如何也没有应用到任何其他版本,所以它只是一个临时的修复。
解决方案是手动提供Angular Web应用,以便您可以:
1.缩小js文件,使其足够小,以便快速下载。
ng serve --configuration production --watch
angular.json中,production配置应该如下所示:

{
  "$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
            }
          }
        }
      }
    }
  }
}

1.使用您自己的服务器(而不是ng serve)提供预构建的应用程序,以便您可以禁用超时。
在一个终端中,启动以下内容以构建应用程序并监控更改:
ng build --watch
在另一个终端中(当第一个终端正在运行时),使用以下命令启动HTTP服务器(-t0禁用超时):
http-server ./dist -p <port> -t0
PS:如果您试图从Android模拟器内部访问Angular应用程序,请确保使用WebView浏览器测试程序,或启用网络权限来访问Android应用程序的HTTP明文地址。

相关问题