与“ws://localhost:4200/ng-cli-ws”的 Angular WebSocket 连接失败

Question

我正在开发一个 Angular 项目，但实时重新加载非常不可靠。运行后ng serve，实时重新加载正常工作一分钟左右，但随后它停止工作，我在 Chrome 中收到这些错误WebSocket connection to 'ws://localhost:4200/ng-cli-ws' failed: 和一个看起来像这样的 [webpack-dev-derver] 错误对象

\n

Event {\nisTrusted: true,\nbubbles: false,\ncancelBubble: false,\ncancelable: false,\ncomposed: false,\ncurrentTarget: WebSocket {__zone_symbol__errorfalse: Array(1), __zone_symbol__openfalse: Array(1), __zone_symbol__ON_PROPERTYerror: \xc6\x92, __zone_symbol__ON_PROPERTYopen: \xc6\x92, __zone_symbol__ON_PROPERTYclose: \xc6\x92, \xe2\x80\xa6},\ndefaultPrevented: false,\neventPhase: 0,\nreturnValue: true,\nsrcElement: WebSocket {__zone_symbol__errorfalse: Array(1), __zone_symbol__openfalse: Array(1), __zone_symbol__ON_PROPERTYerror: \xc6\x92, __zone_symbol__ON_PROPERTYopen: \xc6\x92, __zone_symbol__ON_PROPERTYclose: \xc6\x92, \xe2\x80\xa6},\ntarget: WebSocket {__zone_symbol__errorfalse: Array(1), __zone_symbol__openfalse: Array(1), __zone_symbol__ON_PROPERTYerror: \xc6\x92, __zone_symbol__ON_PROPERTYopen: \xc6\x92, __zone_symbol__ON_PROPERTYclose: \xc6\x92, \xe2\x80\xa6},\ntimeStamp: 50222.70000000298,\ntype: error",\n[[Prototype]]: Event\n

\n

这是我的 package.json 文件

\n

{\n  "name": "wave-frontend",\n  "version": "0.0.0",\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve",\n    "build": "ng build",\n    "watch": "ng build --watch --configuration development",\n    "test": "ng test"\n  },\n  "private": true,\n  "dependencies": {\n    "@angular/animations": "^15.1.1",\n    "@angular/cdk": "^15.1.1",\n    "@angular/common": "^15.1.1",\n    "@angular/compiler": "^15.1.1",\n    "@angular/core": "^15.1.1",\n    "@angular/forms": "^15.1.1",\n    "@angular/localize": "^15.1.1",\n    "@angular/material": "^15.1.1",\n    "@angular/platform-browser": "^15.1.1",\n    "@angular/platform-browser-dynamic": "^15.1.1",\n    "@angular/platform-server": "^15.1.1",\n    "@angular/router": "^15.1.1",\n    "rxjs": "~7.5.0",\n    "tslib": "^2.3.0",\n    "zone.js": "~0.11.4"\n  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "^15.1.2",\n    "@angular-eslint/builder": "15.2.0",\n    "@angular-eslint/eslint-plugin": "15.2.0",\n    "@angular-eslint/eslint-plugin-template": "15.2.0",\n    "@angular-eslint/schematics": "15.2.0",\n    "@angular-eslint/template-parser": "15.2.0",\n    "@angular/cli": "~15.1.2",\n    "@angular/compiler-cli": "^15.1.1",\n    "@types/jasmine": "~4.0.0",\n    "jasmine-core": "~4.1.0",\n    "karma": "~6.3.0",\n    "karma-chrome-launcher": "~3.1.0",\n    "karma-coverage": "~2.2.0",\n    "karma-jasmine": "~5.0.0",\n    "karma-jasmine-html-reporter": "~1.7.0",\n    "typescript": "~4.9.4"\n  }\n}\n

\n

刷新页面会将我发送到屏幕ERR_CONNECTION_REFUSED。我不知道如何解决这个问题，并且当我无法判断对代码所做的更改是否不起作用或者实时重新加载是否再次中断时，这使得在本地环境中进行开发变得非常困难。还有其他人遇到过这个问题吗？任何对此的帮助将不胜感激。

\n

Answer 1

有同样的问题，能够通过publicHost从 angular.json 中 删除来修复它