Trouble with ASP.NET Core 8 & Angular project

Question

I'm trying to launch the "Weather Forecast" template solution but encountering an issue I can't resolve.

Here's what I've done:

First, I installed Visual Studio 2022 and Angular 17 (npm install -g @angular/[email protected]) as specified in the book "ASP.NET Core 8 and Angular" by Valerio De Sanctis.
Then I created a new solution using the "Angular and ASP.NET Core" template in Visual Studio with the settings shown in the screenshot.

The solution was created successfully.

Following the book's instructions, I reordered the solution projects.

When I try to run the projects, npm begins restoring dependencies and I see several outputs in the console and in browser.

If I open https://127.0.0.1:52578/, the page loads, but Visual Studio shows an error:

My question is: what could be causing this problem and how can I fix it?

Why are you getting error "could not connect to debug target port 52653"? See if this helps : stackoverflow.com/questions/44888818/… — jdweng
– jdweng, Commented Jul 19 at 14:43
@jdweng Sorry, but what's the connection between this and my question? — Yonett
– Yonett, Commented Jul 19 at 15:03
Try to set the default port so both Angular and C# are using the same port. — Luuk
– Luuk, Commented Jul 20 at 8:43

marc_s · Accepted Answer · 2025-07-20 08:30:59Z

1

Answering as a comment.

I have an ASP.NET Core 8 Web API with VueJs frontend using <SpaRoot> setup.

Firstly, check if you're using the SpaRoot in the .csproj of the server or not.

The SpaRoot should be pointing to your front end UI folder and there should be an execute command near that SpaRoot element.

You don't need a multi-app start config. When you run the server on its own it should boot up and display "waiting for SPA".

Then VS will run your launch command, think it's default to npm run dev. Where you'll see a console population and build and run the server-host for your UI on a port.

Your page is displaying at your API port and will redirect to the port your UI is at.

If you get debug port errors, could be a config issue or port mismatch in launch settings json and/or your front-end thing.config.json AND .csproj Spa settings.

If all else fails, check port availability in case something is using it. It happens sometimes.

edited Jul 20 at 8:30

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 19 at 18:13

iron_spark

112 bronze badges

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

1 Comment

sitholewb Jul 22 at 15:45

Exactly what I was thinking

Weber K. · Accepted Answer · 2025-07-20 00:39:29Z

0

Please double check your .vscode\launch.json.

Check this reference.

https://learn.microsoft.com/pt-br/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json

answered Jul 20 at 0:39

Weber K.

8427 silver badges16 bronze badges

Collectives™ on Stack Overflow

Trouble with ASP.NET Core 8 & Angular project

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related