How to set a default port for ASP.NET Core Angular app

Question

I created a dotnet core project with the template ASP.NET Core with Angular using the dotnet CLI

dotnet new angular

Now, whenever I run the application using dotnet run command, angular serves with a different port each time.

I tried setting the default serve port in angular-cli.json

"defaults": {
  ..
  "serve": {
    "port": 4200
  }
}

doesn't work though.

I couldn't find any documentation online, so where can I set the default port?

Answer 1

The SpaServices are taking the "ng serve" command from the package.json file and adding a random port before running the command. In Windows, to get around this add your own port command and the suffix "&REM" which tells the command processor that anything after that is a comment.

"scripts": {
  "ng": "ng",
  "start": "ng serve --hmr --o --port=5002 &REM",
  ...
  }

In the command window you will see something similar to the following when it's processed:

  > ng serve --hmr --o --port=5002 &REM "--port" "58198"

Answer 2

Okay, turns out, the changing port doesn't matter as I could access the Angular app from the url http://localhost:5000

$ dotnet run
Using launch settings from /Users/raviteja/Desktop/CSharp/SignalR-Angular-ChatApp/Properties/launchSettings.json...
: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[0]
      User profile is available. Using '/Users/raviteja/.aspnet/DataProtection-Keys' as key repository; keys will not be encrypted at rest.
info: Microsoft.AspNetCore.SpaServices[0]
      Starting @angular/cli on port 56082...
Hosting environment: Development
Content root path: /Users/raviteja/Desktop/CSharp/SignalR-Angular-ChatApp
Now listening on: https://localhost:5001
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
info: Microsoft.AspNetCore.SpaServices[0]
      > [email protected] start /Users/raviteja/Desktop/CSharp/SignalR-Angular-ChatApp/ClientApp
      > ng serve --extract-css "--port" "56082"

      ** NG Live Development Server is listening on localhost:56082, open your browser on http://localhost:56082/ **

info: Microsoft.AspNetCore.SpaServices[0]
      Date: 2018-05-31T23:44:11.061Z

info: Microsoft.AspNetCore.SpaServices[0]
      Hash: 7f8c3d48fb430eed2337
      Time: 13815ms
      chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
      chunk {main} main.bundle.js (main) 50.5 kB [initial] [rendered]
      chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial] [rendered]
      chunk {styles} styles.bundle.css (styles) 119 kB [initial] [rendered]
      chunk {vendor} vendor.bundle.js (vendor) 9.5 MB [initial] [rendered]


info: Microsoft.AspNetCore.SpaServices[0]
      webpack: Compiled successfully.

I thought the port specified in this line is the one I should use to access the Angular app

Starting @angular/cli on port 56082...

turns out, it's not the one I should be using

from MSDN:

The app starts up an instance of the Angular CLI server in the background. A message similar to the following is logged: NG Live Development Server is listening on localhost:, open your browser on http://localhost:/. Ignore this message—it's not the URL for the combined ASP.NET Core and Angular CLI app.

But when I was trying to access http://localhost:5000, I was getting an SSL error, upon more digging, I found this line in Startup.cs

app.UseHttpsRedirection();

After adding this condition, it's working fine now and I'm able to access the Angular app at http://localhost:5000

if (!env.IsDevelopment())
    app.UseHttpsRedirection();