无法在 Visual Studio 2019 ASP.Net Core 3.1 Angular 项目中调试 Typescript

Question

我无法在 VS2019 IDE 中调试我的 Typescript 文件。我选中了调试选项“允许在 Chrome 中调试 Javascript...”，但是每当我在我的打字稿文件中设置断点时，一旦项目启动，它就会更改为带有警告标志的断点图标和带有错误消息的白色中心

This breakpoint is not yet bound and will not be hit

但是，我可以在 VS2019 打开的浏览器窗口中打开我的 Chrome 开发工具，并在 Chrome 开发工具的“源”选项卡中的我的打字稿文件中设置断点。当这些断点被命中时，VS2019 就像我在 IDE 中设置了它们一样，将移动到断点并允许我检查变量等，但仍然不会“绑定”到 IDE 中设置的任何断点。

此外，当我在 VS2019 中进行编辑并保存浏览器时，自动刷新/构建是否正常，只是在 VS2019 中设置断点给我带来了麻烦。

我在网上到处查看，唯一重要的设置似乎是选项->调试->允许 javascript 调试...

我错过了什么？看来我应该可以很容易地做到这一点，但我不确定需要排列哪些其他设置。

编辑：guthub 问题的链接：

https://github.com/microsoft/vscode-js-debug/issues/425

Answer 1

我遇到了类似的问题，并在thread 中找到了解决方案。基本上你必须用 "file:///" 替换 "webpack://" URLs

npm i @angular-builders/custom-webpack -D

确保安装与您的 webpack 匹配的版本。 使用以下内容在您的应用根目录中创建“custom-webpack.config.js”：

var webpack = require('webpack');

const config = {
    plugins: [
        new webpack.SourceMapDevToolPlugin({
                moduleFilenameTemplate: 'file:///[absolute-resource-path]'
            })
       ]
    };

    module.exports = config;

并更改 angular.json 中的“builder”选项：

...
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./custom-webpack.config.js"
        },
...

按照该线程中的链接，有更多文档。所有学分归于marczellm。 希望这会有所帮助，它对我有用。