Visual Studio 调试不适用于打字稿（角度） - Visual Studio 2017 不断跳过断点

Question

// ============================== see updates below ============================== //

我试图在 Visual Studio 2017（不是 Visual Studio Code）上调试打字稿应用程序，但是当我在 .ts 文件上插入断点时，Visual Studio 告诉我： “断点当前不会被命中没有可执行代码与此行相关联”

我想我已经尝试了所有互联网建议的解决方案，但没有任何帮助我解决这个问题，而且似乎没有任何效果。

实际上，这个问题只存在于一个项目中。

我的意思是，我有另一个项目，我可以在 Visual Studio 2017 上使用断点调试打字稿，并且我可以在 ts 文件上使用它们，所以 我认为这不是设置问题。

现在，我的 typescript 调试设置由 tsconfig.json 管理，我认为这个问题可能是由于其中的某些错误，或者可能是在我的 webpack.config.js 文件中。然而，这只是一个假设。 然而： tsconfig.json 内容如下：

{
  "compilerOptions": {
    "target": "es5",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "types": [ "node", "jasmine", "core-js" ],
    "noEmitOnError": true
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    "wwwroot/lib",
    "bin",
    "obj"
  ]
}

Webpack 配置文件内容如下：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    context: __dirname,
    resolve: { extensions: ['.ts', '.js'] }, // .ts is first so that .ts files are prefered over js file, this ensures
    // that angular 2 components are passed through the angular2-template-loader and have their templates and styles inlined
    entry: {
        'polyfills': './App/polyfills.ts',
        'main': './App/main.ts'
    },
    output: {
        path: path.join(__dirname, './wwwroot/dist'),
        filename: '[name].js',
        publicPath: '/dist/'
    },
    module: {
        rules: [

            { test: /\.ts$/, include: /App/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            { test: /\.css$/, use: ['to-string-loader', 'css-loader'] }
        ]
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
};

最后，我正在使用 Microsoft.AspNetCore.SpaServices.Webpack; 来启用 webpack 热模块替换，这在我的 startup.cs 中：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            // HMR //
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = true
                });
            }
            // HMR //

//(...) do more stuff under here

您对此有任何解决方案或故障排除吗？

[如果您需要更多信息，请告诉我]

// =============================================================================== //

---

更新 #1

看起来，在 Visual Studio 2017 和 dot net v.2+ 中集成在微软的 asp net core web 应用程序项目中的 angular 项目天生就有工作断点和调试选项。

不幸的是，这只是另一个问题。它不是 Angular 5 原生应用，而是 Angular 4 应用！此外，任何软件包都是最新的。必须手动更新每一个。

一旦我更新了它们，它似乎就可以工作了。在那个应用程序中，断点有效！
但是我不知道为什么...

Answer 1

将 webpack 上下文设置为 ClientApp 目录（或 TS 示例中的 App）为我完成了这项工作：

  context: path.join(__dirname, "ClientApp"),
  entry: {
    //'main': './ClientApp/main.ts'
    'main': './main.ts'
  }

Answer 2

我遇到了同样的问题，但是是的，正如您在更新 #1 中所说，新的 Visual Studio 正确的 Angular 项目提供了工作调试。
在我的应用程序中，我发现将包更新到最新版本以及将旧项目复制到具有工作断点的新项目中更容易。

但是..如果您仔细阅读新 VS 集成 Angular 应用程序中的 webpack.config.js 文件，您肯定会注意到以下字符串：

        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        })

实际上，SourceMapDevToolPlugin 提供 - 如果配置正确 - 实时映射，这使得使用断点成为可能。
您选择是否使用在线源地图。

您还应该设置属性：devtool: 'inline-source-map'
并启用 UglifyPlugin 的源地图。

我发现的唯一缺点是：

• 从应用启动的第一刻起，断点不可用，您必须等待几秒钟
• 使用断点有点慢
• 使用 chrome 控制台禁用断点