如何在Visual Studio中实现Angular 5与Asp.net Core项目协同运行？

完全理解你的需求——自带的Angular模板确实塞了一堆没用的东西，从零搭一套干净的Api+Angular多启动环境才舒服。下面就一步步教你实现点击VS的Start按钮同时跑起两个项目：

第一步：固定Insig.Api的端口 #

首先得给Api项目分配一个固定端口，避免每次启动端口变化导致Angular代理失效：

• 右键Insig.Api项目 → 属性 → 调试 → 应用URL，设置固定的HTTP/HTTPS端口（比如http://localhost:5000和https://localhost:5001），记得勾选「启用SSL」
• 或者直接编辑项目根目录的launchSettings.json，手动指定applicationUrl，示例如下：

"Insig.Api": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": false,
  "applicationUrl": "https://localhost:5001;http://localhost:5000",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

第二步：让Insig.Web启动Angular开发服务器 #

你把ClientApp放在了wwwroot，但Angular开发依赖自身的dev server来实现热重载、实时编译，所以不能让Insig.Web只做静态文件服务器，得让它启动ng serve命令：

方法1：通过项目属性配置 #

右键Insig.Web项目 → 属性 → 调试 → 启动配置文件选择「项目」，然后在「启动命令」中填入：

cmd /c cd wwwroot\ClientApp && ng serve

方法2：通过.csproj配置（更自动化） #

编辑Insig.Web的.csproj文件，添加以下配置，实现首次启动自动安装npm依赖，每次启动自动启动Angular dev server：

<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
  <!-- 首次启动自动安装npm依赖 -->
  <Exec Command="cd wwwroot\ClientApp &amp;&amp; npm install" Condition="!Exists('wwwroot\ClientApp\node_modules')" />
</Target>
<Target Name="StartAngularDevServer" AfterTargets="PostBuildEvent">
  <!-- 启动Angular开发服务器 -->
  <Exec Command="cd wwwroot\ClientApp &amp;&amp; ng serve" />
</Target>

第三步：配置多启动项目顺序 #

要确保Api先启动，不然Angular发起请求时Api还没就绪：

• 右键解决方案 → 属性 → 启动项目 → 选择「多启动项目」
• 把Insig.Api和Insig.Web的「操作」都设置为「启动」
• 调整顺序，将Insig.Api移到上方（VS会按顺序启动，先跑Api再启动Angular）

第四步：配置Angular代理解决跨域 #

Angular dev server默认运行在http://localhost:4200，直接请求Api会触发跨域问题，所以需要配置代理转发：

1. 在ClientApp根目录创建proxy.conf.json文件，内容如下：

{
  "/api/*": {
    "target": "https://localhost:5001",
    "secure": false,
    "changeOrigin": true
  }
}

2. 编辑ClientApp的angular.json，找到serve配置的options节点，添加代理配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "ClientApp:build",
    "proxyConfig": "proxy.conf.json"
  },
  // 其他配置...
}

这样Angular中所有以/api/开头的请求都会自动转发到你的Api服务器。

测试验证 #

点击VS的Start按钮，你会看到两个控制台窗口：一个是Insig.Api的运行日志，另一个是Angular dev server的编译日志。等Angular编译完成后，会自动打开浏览器，此时就能正常调用Api接口啦！

内容的提问来源于stack exchange，提问作者DiPix