Asp.Net Core多Angular应用下如何修改DevServer WebSocketURL？

1. 修改第二个Angular应用的angular.json配置 #

找到对应clientapp2的architect.serve.options节点，添加webSocketUrl配置指定正确的WebSocket路径：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "ClientApp2:build",
    "port": 4201, // 需与第一个应用端口区分开
    "baseHref": "/clientapp2/",
    "webSocketUrl": "wss://localhost:44313/clientapp2/ng-cli-ws"
  }
}

• baseHref设为/clientapp2/，确保静态资源、路由均基于此路径
• webSocketUrl直接指定目标WebSocket地址，覆盖默认的根路径连接

2. 配置Asp.Net Core反向代理的WebSocket路径转发 #

在Program.cs中，针对clientapp2的路由分支添加路径重写逻辑，将/clientapp2/ng-cli-ws转发到Angular dev server的原始WebSocket路径/ng-cli-ws：

var env = app.Environment;

// 配置第二个Angular应用的路由分支
app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/clientapp2"), clientApp2 =>
{
    // 添加WebSocket路径重写中间件
    clientApp2.Use(async (context, next) =>
    {
        if (context.Request.Path.Equals("/clientapp2/ng-cli-ws"))
        {
            // 将路径重写为Angular dev server期望的根路径WebSocket地址
            context.Request.Path = "/ng-cli-ws";
        }
        await next();
    });

    clientApp2.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp2";
        if (env.IsDevelopment())
        {
            // 代理到第二个Angular应用的dev server端口
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4201");
            // 配置默认页面的静态文件路径
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                RequestPath = "/clientapp2"
            };
        }
    });
});

3. 启动第二个Angular应用 #

确保启动时使用正确的端口和baseHref（若已在angular.json配置，可省略命令行参数）：

ng serve --port 4201 --base-href /clientapp2/

完成以上配置后，第二个Angular应用的WebSocket连接会指向正确路径，Asp.Net Core会自动处理请求转发，彻底解决频繁自动重载的问题。

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