ASP.NET Core 6集成多Angular 14应用WebSocket连接错误解决咨询

问题核心 #

你的错误根源在于配置publicHost: "clientapp2"时，Angular dev-server将其解析为独立域名而非路径前缀，导致浏览器尝试连接wss://clientapp2:44313/ng-cli-ws——但clientapp2并非有效域名，最终触发ERR_NAME_NOT_RESOLVED。禁用热重载只是临时规避，我们需要从配置层面修正WebSocket的连接地址。

解决方案 #

步骤1：为每个Angular项目配置独立端口与完整publicHost #

修改各ClientApp的angular.json，在serve.options中指定专属端口和包含域名的完整publicHost地址：

ClientApp的angular.json配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "port": 4200,
    "publicHost": "https://localhost:44313/clientapp",
    "baseHref": "/clientapp/"
  }
}

ClientApp2的angular.json配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "port": 4201,
    "publicHost": "https://localhost:44313/clientapp2",
    "baseHref": "/clientapp2/"
  }
}

同时确保各ClientApp的index.html中base href与路径匹配：

• ClientApp：<base href="/clientapp/">
• ClientApp2：<base href="/clientapp2/">

步骤2：修改ASP.NET Core Startup.cs，使用代理连接Angular dev-server #

将UseAngularCliServer替换为UseProxyToSpaDevelopmentServer，指向对应Angular项目的dev-server端口：

// ClientApp2的路由映射块
app.Map(new PathString("/clientapp2"), client =>
{
    var path = env.IsDevelopment() ? @"ClientApp2" : @"ClientApp2/dist";
    var clientAppDist = new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), path))
    };
    client.UseSpaStaticFiles(clientAppDist);

    if (env.IsDevelopment())
    {
        client.UseSpa(spa =>
        {
            spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
            spa.Options.SourcePath = "ClientApp2";
            // 代理到ClientApp2的dev-server端口4201
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4201");
        });
    }
    else
    {
        client.UseSpa(spa =>
        {
            spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
            spa.Options.SourcePath = "ClientApp2";
            spa.Options.DefaultPageStaticFileOptions = clientAppDist;
        });
    }
});

// ClientApp的路由映射块同理，代理到4200端口
app.Map(new PathString("/clientapp"), client =>
{
    var path = env.IsDevelopment() ? @"ClientApp" : @"ClientApp/dist";
    var clientAppDist = new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), path))
    };
    client.UseSpaStaticFiles(clientAppDist);

    if (env.IsDevelopment())
    {
        client.UseSpa(spa =>
        {
            spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
            spa.Options.SourcePath = "ClientApp";
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
        });
    }
    else
    {
        client.UseSpa(spa =>
        {
            spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
            spa.Options.SourcePath = "ClientApp";
            spa.Options.DefaultPageStaticFileOptions = clientAppDist;
        });
    }
});

步骤3：启动项目 #

1. 分别启动两个Angular项目的dev-server：
   • 进入ClientApp目录执行：npm start
   • 进入ClientApp2目录执行：npm start
2. 启动ASP.NET Core项目

此配置下，Angular dev-server会生成正确的WebSocket地址（如wss://localhost:44313/clientapp2/ng-cli-ws），浏览器可正常解析并建立连接，热重载功能也能正常工作。

替代方案：直接修改WebSocket路径（不推荐） #

若不想使用代理，可通过导出webpack配置修改WebSocket路径，但Angular 14已弃用ng eject命令，此方案维护成本较高：

1. 导出webpack配置（需借助第三方工具）
2. 在webpack.config.js中修改devServer配置：

devServer: {
  client: {
    webSocketURL: 'wss://localhost:44313/clientapp2/ng-cli-ws'
  }
}

内容的提问来源于stack exchange，提问作者al.koval