Angular Websocket连接失败，虚拟机环境下热重载失效解决方案咨询

出现WebSocket连接失败导致热重载失效，核心原因是Angular开发服务器默认仅绑定虚拟机的localhost，宿主机浏览器无法正确建立WebSocket连接，以下是几种可行方案：

• 修改ng serve启动参数
  让开发服务器监听虚拟机所有网络接口，同时指定宿主机访问的公开地址：

  ng serve --host 0.0.0.0 --public-host localhost
  

  若想永久生效，可编辑项目根目录下的angular.json，找到projects -> [你的项目名] -> architect -> serve -> options，添加配置：

  "host": "0.0.0.0",
  "publicHost": "localhost"
  

  之后直接运行ng serve即可生效。

• 检查VirtualBox端口转发规则
  确保端口转发规则同时覆盖WebSocket的TCP连接：

  • 主机端口和客户机端口均设为4200
  • 主机地址填写127.0.0.1
  • 协议选择TCP

• 强制禁用SSL连接
  若浏览器自动尝试wss协议（加密WebSocket）但服务未配置SSL，可强制使用非加密的ws协议：

  ng serve --host 0.0.0.0 --public-host localhost --ssl false
  

  同样可在angular.json的serve options中添加"ssl": false永久配置。

• 临时调试：手动修正WebSocket地址
  打开浏览器开发者工具（控制台），手动替换WebSocket连接地址，将wss://localhost/ng-cli-ws改为ws://localhost:4200/ng-cli-ws，此方法仅临时生效，刷新页面后需重新操作。

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