angular - 我的 Angular 应用程序在调试时没有命中断点？

Question

具有 C# Web API 后端的 Visual Studio Code 和 Angular 应用程序有点新。在 C# 中设置断点没问题，只是在 VS Code 中的 Angular 应用程序中没有设置断点!

当我点击调试我的应用程序的调试按钮，Angular 断点从红色变为空心灰色!

免责声明 - 我不得不提一下，我更改了很多文件名并重命名了 .csproj 文件，因为我希望该应用反射(reflect)我的名字，而不是讲师使用的名字。在执行此操作之前，我能够在 Angular 应用程序中设置断点并命中它们。

这是我试过的。

1. 重新启动 VS Code
2. 开始，服务
3. 在包含我的两个项目文件夹(Ng、.Net)的同一文件夹级别生成了一个新的 launch.json 文件(由 VS Code 自动生成)
4. 删除了我的工作区文件(似乎无法生成新文件，不确定是否需要)

在文件中:

error.interceptor.ts

我试图通过说来测试这个异常处理:

throw new Exception("Some login error");

在我的登录方法中。

我可以设置如下所示的断点，但它变成了一个灰色圆圈，并且在我单击“调试”时永远不会被击中。

这里是我设置断点的地方

这是我在运行调试器时看到的，红色圆圈变成灰色和空心。我希望在调试时能够逐步通过这个错误拦截器，这可能吗？

然后在我的 Angular 应用程序的登录方法中，我的断点变成灰色

这是我的 launch.json 文件

{
  // Use IntelliSense to find out which attributes exist for C# debugging
  // Use hover for the description of the existing attributes
  // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
  "version": "0.2.0",
  "configurations": [

    {
      "name": ".NET Core Launch (web)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      // If you have changed target frameworks, make sure to update the program path.
      "program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll",
      "args": [],
      "cwd": "${workspaceFolder}/Yogabandy.API",
      "stopAtEntry": false,
      "launchBrowser": {
        "enabled": true
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
      }
    },
    {
      "name": ".NET Core Attach",
      "type": "coreclr",
      "request": "attach",
      "processId": "${command:pickProcess}"
    }
  ]
}

另外 - 当我运行调试控制台时，我看到了很多这样的行。不知道这是否正常？

Loaded '/usr/local/share/dotnet/shared/Microsoft.NETCore.App/2.2.4/System.Threading.dll'. The module was built without symbols. Loaded '/usr/local/share/dotnet/shared/Microsoft.NETCore.App/2.2.4/System.IO.FileSystem.Watcher.dll'. Skipped loading symbols. The module is optimized and the debugger option 'Just My Code' is enabled.

Answer 1

事情是这样的!这与 .vscode 文件中项目的路径有关，并且需要同时调试两个单独的项目文件夹!

${workspaceFolder}

我有两个应用文件夹

1. Yogabandy-SPA(Angular 应用程序)
2. Yogabandy.API(ASP.Net Core Web API)

我认为 .vscode 文件的最佳位置是根级别，除非有人有更好的解决方案，否则这似乎是最佳位置。

但问题是需要更正工作区文件夹的路径。

更正路径

"webRoot": "${workspaceFolder}" // old
"webRoot": "${workspaceFolder}/Yogabandy-SPA" // new
"program": "${workspaceFolder}/bin/Debug/netcoreapp2.2/Yogabandy.API.dll" // old
"program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll" // new

// removed from the 'server' command so two debuggers don't open, just one
"serverReadyAction": {
  "action": "openExternally",
  "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
},

添加了一个化合物，以便我可以同时调试这两个项目。

"compounds": [{
  "name": "Server/Client",
  "configurations": ["server", "client"]
}]

我在启动调试器时仍然遇到一个小问题。 VS Code 显示如下，但我现在可以同时调试这两个应用程序并命中两个项目的所有断点。

如果有人有更好的解决方案请告诉我。

"compounds": [{
  "name": "Server/Client",
  "configurations": ["server", "client"]
}],
"configurations": [{
    "name": "server",
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "build",
    "program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll",
    "args": [],
    "cwd": "${workspaceFolder}/Yogabandy.API",
    "stopAtEntry": false,
    "env": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    },
    "sourceFileMap": {
      "/Views": "${workspaceFolder}/Views"
    }
  },
  {
    "type": "chrome",
    "request": "launch",
    "name": "client",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}/Yogabandy-SPA"
  }