Angular WebSocket connection to 'ws://localhost:4200/ng-cli-ws' failed

Question

I am working on an Angular project, but live reload is very unreliable. After running ng serve, live reload works normally for a minute or so, but then it stops working and I get these errors in Chrome WebSocket connection to 'ws://localhost:4200/ng-cli-ws' failed: and a [webpack-dev-derver] error object that looks like this

Event {
isTrusted: true,
bubbles: false,
cancelBubble: false,
cancelable: false,
composed: false,
currentTarget: WebSocket {__zone_symbol__errorfalse: Array(1), __zone_symbol__openfalse: Array(1), __zone_symbol__ON_PROPERTYerror: ƒ, __zone_symbol__ON_PROPERTYopen: ƒ, __zone_symbol__ON_PROPERTYclose: ƒ, …},
defaultPrevented: false,
eventPhase: 0,
returnValue: true,
srcElement: WebSocket {__zone_symbol__errorfalse: Array(1), __zone_symbol__openfalse: Array(1), __zone_symbol__ON_PROPERTYerror: ƒ, __zone_symbol__ON_PROPERTYopen: ƒ, __zone_symbol__ON_PROPERTYclose: ƒ, …},
target: WebSocket {__zone_symbol__errorfalse: Array(1), __zone_symbol__openfalse: Array(1), __zone_symbol__ON_PROPERTYerror: ƒ, __zone_symbol__ON_PROPERTYopen: ƒ, __zone_symbol__ON_PROPERTYclose: ƒ, …},
timeStamp: 50222.70000000298,
type: error",
[[Prototype]]: Event

Here is my package.json file

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

Refrehsing the page sends me to the ERR_CONNECTION_REFUSED screen. I have no idea what to do to solve the issue and it makes developing in a local env very difficult when I cannot tell whether the changes made to the code did not work or if the live reload has broken again. Has anyone else come across this issue? Any help with this would be greatly appreciated.

Answer 1

Had the same issue, was able to fix it by removing the publicHost from angular.json

Answer 2

go to angular.json , and add those 2 lines:

 "serve": {
      "builder": "@angular-devkit/build- 
      angular:dev-server",
      "options": {
        "disableHostCheck": true,
        "port": 4200,
        "browserTarget": "jwt-youtube-ui:build"
      },