Asp.net core and multiple angular apps

Question

I'm trying to create an application with several spa applications. Project uses asp.net core 6, angular 14. I can run the project in development mode. But when I open the project in a browser (https://localhost:44313/clientapp) I get an error: WebSocket connection to 'wss://clientapp:44313/ng-cli-ws' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

I can't understand how change url for WebSocketClient in webpack-dev-server. How can i fixed that?

Sample project https://github.com/alkoval/AspNetCoreMultipleAngular

Startup.cs, Configure method

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.UseAngularCliServer(npmScript: "start");
                    });
                }
                else
                {
                    client.UseSpa(spa =>
                    {
                        spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
                        spa.Options.SourcePath = "ClientApp";
                        spa.Options.DefaultPageStaticFileOptions = clientAppDist;
                    });
                }
            });

I changed base url in index.html to <base href="/ClientApp/" />

Screenshot error:

Update

I changed Startup.cs

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";
                        spa.UseAngularCliServer(npmScript: "start");
                    });
                }
                else
                {
                    client.UseSpa(spa =>
                    {
                        spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
                        spa.Options.SourcePath = "ClientApp2";
                        spa.Options.DefaultPageStaticFileOptions = clientAppDist;
                    });
                }
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";
                spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions()
                {
                    OnPrepareResponse = ctx =>
                    {
                        var headers = ctx.Context.Response.GetTypedHeaders();
                        headers.CacheControl = new CacheControlHeaderValue
                        {
                            NoCache = true,
                            NoStore = true,
                            MustRevalidate = true,
                            MaxAge = TimeSpan.Zero
                        };
                    }
                };

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

Changed angular.json in first ClientApp.

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "publicHost": "clientapp" // remove this
          },

Now the ClientApp is working fine. But ClientApp2 is reloaded every time. If i add option "publicHost": "clientapp2" to 'serve:' angular.json, i get error: WebSocket connection to 'wss://clientapp2:44313/ng-cli-ws' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

I think i need to set ws://localhost:44313/clientapp/ng-cli-ws for web-dev-server. But i don't know how.

Update 2 If I start the project with ng serve --live-reload=false I don't have this problem, but it's a bad option for development.

Answer 1

I have searched a lot and also reproduced the issue in my side. Finally I found this maybe a bug in angualr 15.

I found the websocket url is wrong.

`wss://clientapp2:44333/ng-cli-ws'

It should be

`wss://localhost:44333/clientapp2/ng-cli-ws'

I suggest you create a github issue and use other ways to complete this project or use other verion. It can save your time.