What additional settings are needed to change Angular default port from 4200 to other numbers?

Question

I am learning asp.net core webapi and angular 13 using Visual Studio Community 2022.

The solution consists of two projects with the following templates:

Standalone TypeScript Angular Project
Asp.Net Core Web API

I did the following modifications:

Changing the port target in src\proxy.conf.js of the Angular project from a random number to 40443 as follows:

const PROXY_CONFIG = [
   {
     // other settings are trimmed for the sake of simplicity
     target: "https://localhost:40443",
   }
]

Changing the https port in properties\launchSettings.json of the Web API project from a random number to 40443 as follows:
```
 {
   // other settings are truncated for the sake of simplicity
   "profiles": {
     "BackendProjectName": {
       "applicationUrl": "https://localhost:40443;http://localhost:5042"
     }
    }
   }
 }
```
Note: the http port is kept with its default random value because I am not interested in the unsafe one right now.
Reordering multiple startup projects as follows:

When I pressed the Start button (in debug mode) and accepted the asp.net development certificate, two browsers were opened. They displayed correct results (weather forecast simulation data). Swagger is opened at port 40443 and the angular is opened at port 4200.

Attempt to change Angular port from 4200 to 5000

As I want the Angular to listen at port 5000 (for example), I added "port": 5000 to angular.json as follows

"serve": {
  // other settings are truncated for the sake of simplicity
  "options": {
    "proxyConfig": "src/proxy.conf.js",
    "port": 5000
  }
}

Unfortunately, I got the following error displayed on the console window of the angular development server:

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:5000/weatherforecast to https://localhost:40443/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

Question

What am I missing here?

Display Name · Accepted Answer · 2022-06-01 16:43:02Z

2

I also need to modify launch.json in the Angular project as follows.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost (Chrome)",
      "url": "https://localhost:5000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "edge",
      "request": "launch",
      "name": "localhost (Edge)",
      "url": "https://localhost:5000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

It is a bit counter-intuitive because I created the projects with VS Community but launch.json is in .vscode that is hidden by VS Community.

answered Jun 1, 2022 at 16:43

Display Name

15.2k24 gold badges103 silver badges181 bronze badges

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

Comments

Charlie V · Accepted Answer · 2022-06-01 15:35:05Z

0

If I understand correctly you want to have angular listen to port 5000. The setting you mention is for the proxy (out of Angular to apis). The command you're looking for (to server you angular from a different port is:

ng serve --port 5000

Now its on localhost:5000.

edited Jun 1, 2022 at 15:35

answered Jun 1, 2022 at 15:31

Charlie V

1,0501 gold badge10 silver badges15 bronze badges

3 Comments

Charlie V Over a year ago

Updated the answer, however you also have to change the last proxy setting back to what it was I think.

Charlie V Over a year ago

Hmmm, let's dig deeper.

Display Name Over a year ago

See my answer. Thank you for your participation. :-)

Collectives™ on Stack Overflow

What additional settings are needed to change Angular default port from 4200 to other numbers?

Attempt to change Angular port from 4200 to 5000

Question

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Attempt to change Angular port from 4200 to 5000

Question

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related