Visual Studio调试不起作用(Angular) - Visual Studio 2017不断跳过断点

Question

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

我试图在Visual Studio 2017上调试打字稿应用程序(不是Visual Studio Code (，但是当我在.TS文件上插入断点时，Visual Studio会告诉我：" 当前不会击中断点，该行与此行相关的可执行代码"

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

实际上，这个问题仅在一个项目中就存在。

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

现在，我的打字稿调试设置由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中集成在Microsoft的ASP Net Core Web应用程序项目中的角度项目和DOT Net v.2 天生具有工作断点和调试选项。

不幸的是，还有另一个问题。这不是一个Angular 5本机应用程序，它是一个Angular 4应用程序！此外，任何软件包都是最新的。必须手动更新每个。

一旦我更新了它们，它似乎可以正常工作。在该应用程序中，断点有效！
但我找不到原因...

Answer 1

我也遇到了同样的问题，但是，正如您在Update＃1中所说的那样，新的Visual Studio适当的角度项目由工作调试提供。
在我的应用程序中，我发现将软件包更新到最新版本，并在新项目中复制新项目。

。

但是..如果您在新的VS Integrated Angular App中读取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的sourcemaps。

我发现的唯一缺点是：

• 断点以来，自应用程序启动的第一刻以来，您必须等待几秒钟
• 使用断点有点慢
• 使用Chrome Console禁用断点

Answer 2

将webpack上下文设置为客户端dir(或ts'example中的应用(为我完成了工作：

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