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

Question

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

此断点尚未绑定(bind)，不会命中

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

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

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

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

编辑:链接到 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 中的“builder”选项:

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

点击该线程中的链接，有更多文档。所有学分 marczellm . 希望这对我有帮助，它对我有用。