0

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: enter image description here

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.

9
  • It's look like port or SSL issue, try http://localhost:44313/clientapp and ws://clientapp:44313/ng-cli-ws, remove s from both URLs. Commented Jan 17, 2023 at 6:48
  • @HardikSolanki it doesn't work without s because 44313 is port for https. Commented Jan 17, 2023 at 7:29
  • Then try without s with relevant port number. Commented Jan 17, 2023 at 7:30
  • I tried=) But the application doesn't open on localhost:44313/clientapp Commented Jan 17, 2023 at 7:33
  • You need to try on both URLs at same time. Commented Jan 17, 2023 at 8:30

1 Answer 1

0

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'

enter image description here

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

Sign up to request clarification or add additional context in comments.

1 Comment

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.