我正在使用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开发服务器的超时引起的,我怎样才能增加超时?如果不是,我怎样才能防止这个错误?
2条答案
按热度按时间sg3maiej1#
对我来说,一个临时的解决方案是多次刷新页面,直到vendor.js和main.js文件下载完毕。
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
配置应该如下所示:1.使用您自己的服务器(而不是
ng serve
)提供预构建的应用程序,以便您可以禁用超时。在一个终端中,启动以下内容以构建应用程序并监控更改:
ng build --watch
在另一个终端中(当第一个终端正在运行时),使用以下命令启动HTTP服务器(
-t0
禁用超时):http-server ./dist -p <port> -t0
PS:如果您试图从Android模拟器内部访问Angular应用程序,请确保使用WebView浏览器测试程序,或启用网络权限来访问Android应用程序的HTTP明文地址。