非Visual Studio创建项目中aspnetcore-browser-refresh.js加载异常问题

排查方向及解决步骤 #

1. 清理ASP.NET Core相关残留依赖与配置 #

原项目是Visual Studio创建的Angular应用，大概率带有ASP.NET Core集成的专属依赖或配置，迁移到NX后这些内容会干扰调试：

• 打开package.json，查找并移除Microsoft.AspNetCore.SpaProxy、Microsoft.AspNetCore.NodeServices这类和ASP.NET Core相关的依赖包，执行npm install（或你使用的包管理器命令）更新依赖
• 检查项目根目录的launchSettings.json、angular.json以及NX的project.json，删除所有涉及ASP.NET Core的启动配置、代理设置或参数

2. 重置项目缓存与构建产物 #

缓存或旧构建产物可能导致冲突：

• 执行nx reset重置NX的缓存
• 删除项目目录下的node_modules、dist、.angular、.nx文件夹
• 重新安装依赖并构建项目：npm install && nx build，之后用nx serve启动再尝试调试

3. 修正VS Code调试配置 #

确保调试配置是针对NX Angular的，而非ASP.NET Core：

• 打开.vscode/launch.json，替换为适配NX的Angular调试配置（替换your-app-name为你的应用名称）：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "NX Angular: Serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "nx: serve your-app-name",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}/apps/your-app-name/src",
        "sourceMaps": true
      }
    ]
  }
  

• 同时检查.vscode/tasks.json，确保nx: serve your-app-name任务指向正确的NX启动命令：

  {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "nx: serve your-app-name",
        "type": "shell",
        "command": "nx serve your-app-name",
        "isBackground": true,
        "problemMatcher": {
          "owner": "typescript",
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".*NX Running.*",
            "endsPattern": ".*is running on.*"
          }
        }
      }
    ]
  }
  

4. 排查系统更新带来的环境变化 #

公司夜间更新可能修改了Node.js版本或环境变量：

• 用node -v查看当前Node.js版本，对比之前能正常调试的版本，不一致的话用nvm切换回旧版本
• 关闭所有ASP.NET Core相关的后台进程（比如dotnet相关进程），再重新启动项目

内容的提问来源于stack exchange，提问作者Tyrel Van Niekerk