需要哪些额外设置才能将 Angular 默认端口从 4200 更改为其他数字？

Question

我正在使用 Visual Studio Community 2022 学习 asp.net 核心 webapi 和 angular 13。

该解决方案由两个具有以下模板的项目组成：

Standalone TypeScript Angular Project
Asp.Net Core Web API

我做了以下修改：

将 Angular 项目的 src\proxy.conf.js 中的端口目标从随机数更改为 40443，如下所示：

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

将 Web API 项目 properties\launchSettings.json 中的 https 端口从随机数更改为 40443，如下所示：


 {
   // other settings are truncated for the sake of simplicity
   "profiles": {
     "BackendProjectName": {
       "applicationUrl": "https://localhost:40443;http://localhost:5042"
     }
    }
   }
 }

注意：http 端口保留其默认随机值，因为我现在对不安全的端口不感兴趣。

重新排序多个启动项目如下：

当我按下 Start 按钮（在调试模式下）并接受 asp.net 开发证书时，打开了两个浏览器。他们显示了正确的结果（天气预报模拟数据）。 Swagger 在 40443 端口打开，angular 在 4200 端口打开。

尝试将 Angular 端口从 4200 更改为 5000

因为我希望 Angular 在端口 5000 上监听（例如），我将 "port": 5000 添加到 angular.json 如下

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

不幸的是，angular 开发服务器的控制台 window 上显示了以下错误：

[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)

问题

我在这里错过了什么？

Answer 1

如果我理解正确的话，您希望 angular 监听端口 5000。您提到的设置是针对代理的（从 Angular 到 api）。您正在寻找的命令（从不同的端口为您 angular 服务器是：

ng serve --port 5000

现在在 localhost:5000。

Answer 2

我还需要在Angular项目中修改launch.json如下

{
  "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}"
    }
  ]
}

有点counter-intuitive，因为我用 VS Community 创建了项目，但是 launch.json 在被 VS Community 隐藏的 .vscode 中。

需要哪些额外设置才能将 Angular 默认端口从 4200 更改为其他数字？

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

asp.net-web-api

angular

尝试将 Angular 端口从 4200 更改为 5000

问题