Why does SpaServices always seem to add a random different port?

Question

Since the update of Core 2.1, there have been new Spa templates. I've tried out the Angular one, and updated it to Angular 6. Now everything works fine, except that I need to manually build everytime I make changes. This is strange because it used to work well with Angular 5 before. I've looked up a bit into this and I spotted this in the logs:

Microsoft.AspNetCore.SpaServices:Information: > [email protected] start C:[redacted]\Projects\test\test\ClientApp ng serve "--port" "62206"

** Angular Live Development Server is listening on localhost:62206, open your browser on http://localhost:62206/ **

As you can see, it adds "--port" "62206" to the ng serve. When I later go to http://localhost:62206/, I can see my website and live updates seem to be working there!

I've tried restarting my server a few times and I noticed that each time it uses a different port. It almost seems random.

What I find even more infuriating is that my application is actually running on port 66230! Why doesn't SpaServices just use the IIS port? And is there a way to change it manually? Because if I have to wait for my server to start, scroll through the output to find the port it chose, type that in my address so I can debug, I will lose a lot of time and effort

Collinsia

I find this very annoing when trying to debug the Angular code with vsCode. I wish there was a way to fix the port or something. – Sidras

Might this answer help? #50634363 – Ize

Answer 1

The port that the SPA runs on is entirely configurable. Angular and the SPA services, attach the live reload to the browser, and if you want to debug the JavaScript it can attach to an instance with the browser debug available.

Check out this thread on the SPA Services and how to change the port. Once you get everything lined up, your live reload will work fine again.

How to change the port number for Asp.Net core app?

Alternatively, you can always install the angular-cli and launch it manually. There's nothing special about the angular site it creates, and it will run fine without having to be called by the SPA startup.

npm install -g @angular/cli

use the -g switch if you want it installed globally.

switch to the directory of the angular project cd /my-project/app/src

ng serve

This should load the site up on port 4200. Live reload will be enabled, for any front end changes. You can then start your back end debugger for your .NET application separately. (comment out the SPA startup)

I know this seems like a longer road, but I always preferred that .NET didn't start the SPA anyway during development, it made startup longer, and had the exact port issues you're describing.

Curarize