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

Question

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

This breakpoint is not yet bound and will not be hit

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

此外，当我在 VS2019 中进行编辑并保存浏览器时，自动 refresh/build 就好了，它只是在 VS2019 中设置断点给我带来了麻烦。

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

我错过了什么？看来我应该能够很容易地做到这一点，但我不确定还需要排队什么其他设置。

编辑：Link 到 guthub 问题：

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

Answer 1

我遇到了类似的问题，并在此 thread 中找到了解决方案。基本上，您必须将“webpack://”URL 替换为“file:///”

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 中的“生成器”选项：

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

点击该线程中的链接，有更多文档。所有功劳都归功于 marczellm。 希望这对我有用。