在Visual Studio的ASP.Net项目中使用Angular的ng serve/ng build --watch遇阻

Been there, done that！我太懂这种每次改完代码都要手动重新构建的繁琐了！之前在ASP.NET MVC项目里整合Angular CLI时，也踩过一模一样的坑——把ng build换成ng build --watch或者ng serve在.csproj脚本里完全没效果。给你几个亲测有效的解决方案：

1. 检查.csproj脚本的配置细节 #

首先得确认你的构建脚本是不是放在了正确的Target里，而且工作目录准确指向了Angular项目的根文件夹。比如你的Angular项目在项目根目录的ClientApp文件夹下，正确的配置应该是这样的：

<Target Name="AngularWatchBuild" BeforeTargets="Build">
  <Exec Command="ng build --watch" WorkingDirectory="$(ProjectDir)ClientApp" />
</Target>

这里要注意：ng build --watch是持续运行的进程，不会自动退出，这会导致VS的构建任务一直处于“运行中”的状态，可能会阻塞后续的构建操作。如果遇到这种情况，强烈推荐试试下面的分开运行方案。

2. 更顺畅的方案：分开运行ng serve和ASP.NET MVC项目 #

其实ng serve本身就是Angular的开发服务器，和ASP.NET MVC的后端服务器完全可以独立运行，这样还能享受Angular原生的热重载功能，改代码秒刷新！具体步骤：

• 在Angular项目根目录（比如ClientApp）创建一个proxy.conf.json文件，用来把API请求转发到ASP.NET MVC的后端端口（替换成你自己项目的端口）：

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

• 打开VS自带的终端，进入ClientApp目录，运行：

  ng serve --proxy-config proxy.conf.json
  

• 正常启动ASP.NET MVC项目（比如按F5），然后访问http://localhost:4200就能同时使用Angular前端和ASP.NET MVC后端了，修改Angular代码会自动刷新页面，完全不用手动构建！

3. 若要在VS内整合自动监听，试试dotnet watch #

如果一定要在VS的构建流程里实现自动监听，可以配合dotnet watch来触发Angular的构建：
在.csproj里添加以下配置：

<ItemGroup>
  <!-- 监听Angular项目下的所有文件变化 -->
  <Watch Include="ClientApp/**/*" />
</ItemGroup>

<Target Name="AutoBuildAngular" AfterTargets="Build">
  <Exec Command="ng build --watch" WorkingDirectory="$(ProjectDir)ClientApp" />
</Target>

然后在终端里运行：

dotnet watch run

这样当Angular文件有变化时，会自动触发ng build --watch重新构建。不过这种方式还是会有进程阻塞的小问题，体验不如分开运行ng serve顺畅。

4. 排查基础环境问题 #

最后别忘了检查基础环境：

• 确认VS能找到ng命令：在VS的Package Manager Console里运行ng --version，如果能正常输出Angular CLI的版本信息，说明环境变量没问题；如果报错，需要把Node.js的安装目录（比如C:\Program Files\nodejs）添加到系统环境变量里。
• 确保Angular项目的依赖都安装完整：进入ClientApp目录，运行npm install，解决所有依赖缺失的问题。

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