Angular项目ng serve热重载失效，WebSocket连接失败求助

针对你遇到的ng serve启动后热重载1分钟失效、WebSocket连接失败（ws://localhost:4200/ng-cli-ws）、刷新页面出现ERR_CONNECTION_REFUSED的问题，可尝试以下解决方案：

1. 检查端口占用并更换端口 #

4200端口可能被其他进程占用导致WebSocket连接中断：

• Windows执行命令：netstat -ano | findstr :4200，找到PID后在任务管理器结束对应进程
• Mac/Linux执行命令：lsof -i :4200，执行kill -9 <PID>杀掉占用进程
• 或者直接换端口启动：ng serve --port 4201

2. 禁用Zone.js的WebSocket补丁 #

Zone.js的WebSocket猴子补丁可能与webpack-dev-server的WebSocket冲突，在src/polyfills.ts文件末尾添加：

(window as any).__Zone_disable_websocket = true;

添加后重启ng serve。

3. 升级Zone.js到稳定版本 #

你当前使用的zone.js版本是~0.11.4，该版本存在WebSocket相关的稳定性问题，升级到0.11.x的最新稳定版：

npm install zone.js@~0.11.8 --save

4. 清理项目缓存并重装依赖 #

缓存或损坏的依赖可能导致服务异常：

1. 停止ng serve进程
2. 删除node_modules文件夹、package-lock.json文件
3. 执行npm cache clean --force清理npm缓存
4. 重新安装依赖：npm install
5. 重启ng serve

5. 配置webpack-dev-server的WebSocket参数 #

在angular.json的projects -> wave-frontend -> architect -> serve -> options中添加WebSocket相关配置：

"options": {
  "browserTarget": "wave-frontend:build",
  "websocketPort": 4200,
  "publicHost": "localhost:4200",
  "liveReload": true
}

保存后重启服务。

6. 禁用浏览器缓存或使用无痕模式 #

浏览器缓存可能干扰热重载机制：

• 打开Chrome开发者工具，切换到Network标签，勾选Disable cache选项
• 或者直接使用Chrome无痕窗口访问http://localhost:4200

内容的提问来源于stack exchange，提问作者DoubleU