Angular模块联邦WebSocket连接失败问题求助

配置Angular模块联邦时，修改angular.json的启动选项，将publicHost替换为host并设置值为localhost.xxx.com:4200，配置内容如下：

"options": {
   "port": 4200,
   "host": "localhost.xxx.com:4200",
   "extraWebpackConfig": "webpack.config.js"
 },

运行项目后，浏览器控制台抛出WebSocket连接失败错误：

WebSocket connection to 'ws://localhost.xxx.com:4200/ng-cli-ws' failed: 

将配置改回publicHost并设置为http://localhost:4200后，错误消失。

1. 明确host与publicHost的职责 #

• host是DevServer绑定的本地网络接口，仅需填写域名或IP，不能包含端口（端口由单独的port字段配置）。你当前的host配置带了端口，导致DevServer解析异常，进而引发WebSocket连接失败。
• publicHost是浏览器访问应用的公开地址，需填写完整的协议+域名+端口（如http://localhost.xxx.com:4200），用于告知浏览器正确的资源访问路径，包括WebSocket连接地址。

2. 修正angular.json配置（优先方案） #

保留publicHost指定公开访问地址，同时用host绑定本地接口，正确配置如下：

"options": {
   "port": 4200,
   "host": "localhost.xxx.com",
   "publicHost": "http://localhost.xxx.com:4200",
   "extraWebpackConfig": "webpack.config.js"
 },

此配置下，DevServer会绑定到localhost.xxx.com:4200，同时告知浏览器使用正确的WebSocket地址，避免连接错误。

3. Webpack配置自定义WebSocket地址（可选） #

如果模块联邦有特殊需求，需通过Webpack覆盖默认配置，可在webpack.config.js中添加DevServer的WebSocket配置：

module.exports = {
  devServer: {
    client: {
      webSocketURL: 'ws://localhost.xxx.com:4200/ng-cli-ws'
    }
  }
};

但优先推荐使用Angular CLI原生配置，减少额外配置带来的冲突风险。

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