如何解决VS2017中Angular 5应用启用JS调试后的启动错误？

碰到这种启用JavaScript调试后启动出错的情况，结合你有API和UI两个启动项目的场景，我给你整理几个实用的排查思路，都是实际开发中常遇到的问题：

1. 调整多启动项目的启动顺序与延迟 #

UI大概率依赖API的接口服务，如果启用JS调试后UI先完成启动，API还没就绪，就会触发请求失败类的错误。你可以这么配置：

• 右键解决方案 → 属性 → 启动项目 → 选择「多启动项目」，把API的操作设为启动，UI的操作同样设为启动，然后用上下箭头把API调到UI前面，确保API先完成启动再加载UI。
• 如果API启动速度慢，还可以给UI加个启动延迟：右键UI项目 → 属性 → 调试 → 在「启动选项」的命令参数里，把原来的启动命令改成timeout /t 5 /nobreak && ng serve（假设你用Angular CLI启动UI），给API留足启动时间。

2. 检查端口冲突与调试端口配置 #

启用JS调试后，VS会占用额外的调试端口，很容易和API/UI的服务端口冲突：

• 先确认API的端口：右键API项目 → 属性 → Web → 查看「项目URL」的端口（比如http://localhost:5000），用命令行netstat -ano | findstr :端口号检查是否被其他程序占用，要是被占用就换个端口。
• 再检查UI的调试端口：右键UI项目 → 属性 → 调试 → 确认「启动URL」的端口（比如http://localhost:4200），如果和API端口重复，直接改成其他未被占用的端口。
• 另外，去VS的「调试」菜单 → 选项 → 调试 → JavaScript → 确认调试器类型是你正在用的浏览器（比如Chrome），并且关闭所有该浏览器的其他窗口，避免被其他调试会话占用。

3. 修复Angular项目的调试关联配置 #

Angular 5在VS2017里启用JS调试，偶尔会出现项目配置不匹配的情况：

• 打开UI项目的.csproj文件，检查是否有正确的调试配置节点，确保包含类似下面的内容：

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <DebuggerFlavor>ChromeDebugger</DebuggerFlavor>
    <StartAction>Program</StartAction>
    <StartProgram>$(AppData)\npm\node_modules\@angular\cli\bin\ng</StartProgram>
    <StartArguments>serve</StartArguments>
  </PropertyGroup>
  

• 如果是用VS模板创建的项目，建议把Angular CLI更新到和Angular 5兼容的版本（对应CLI版本是1.5.x），打开命令行到UI项目根目录，执行npm install @angular/cli@1.5.8 --save-dev，然后重启VS试试。

4. 清理缓存并重建项目 #

缓存问题是调试时的常见坑，试试下面的操作：

• 先关闭VS，删除解决方案目录下的.vs隐藏文件夹，再删除UI项目的node_modules文件夹和package-lock.json文件，然后打开命令行到UI根目录执行npm install重新安装依赖。
• 回到VS，先清理解决方案（菜单 → 项目 → 清理解决方案），再重建所有项目（菜单 → 生成 → 重建解决方案）。
• 启动调试后，在浏览器按Ctrl+Shift+R强制刷新页面，避免旧的缓存脚本干扰调试。

5. 抓取具体错误信息定位问题 #

如果上面的方法都没解决，先拿到具体的错误详情才能精准排查：

• 启动调试后，当错误出现时，查看VS的「输出」窗口（切换到「调试」输出标签），或者打开浏览器开发者工具（F12），看「控制台」里的报错信息，以及「网络」标签里的请求失败情况。
• 比如如果是「无法连接到调试目标」的错误，直接关闭所有浏览器窗口，重启VS再启动调试会话试试。

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