Angular 8-通过USB提供时，GET styles.js net::ERR_CONTENT_LENGTH_MIS

Question

我正在使用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开发服务器中的超时引起的，我如何增加超时？如果没有，如何防止此错误？

Answer 1

一个对我有效的临时解决方案是多次刷新页面，直到下载vendor.js和main.js文件。

Answer 2

这个问题花了我一段时间进行调试和修复，希望这能帮助其他人。这个错误出现在NodeJS v8中，在Angular 14和NodeJS 18中仍然存在。

出现此问题是因为设备的下载速度有限，并且在下载必要的angular js文件之前，服务器会超时以断开连接。这个问题可能发生在USB上，也可能发生在Android Studio AVD模拟器内(我的情况(。它可以通过使用Chrome浏览器DevTools>网络>启用"；禁用缓存"；并设置"；节流；至"；慢速3G"；，然后尝试访问本地提供的网络应用程序。

主要问题是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
}
}
}
}
}
}
}

2. 使用您自己的服务器(而不是ng serve(为预构建的应用程序提供服务，以便您可以禁用超时

在一个终端中，启动以下程序来构建应用程序并监控更改：

ng build --watch

在一个单独的终端中(当第一个终端正在运行时(，用以下命令启动HTTP服务器(-t0禁用超时(：

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

PS：如果你试图从Android模拟器内部访问Angular应用程序，请确保使用WebView Browser Tester应用程序，或者启用网络权限来访问Android应用程序的HTTP明文地址。