Chrome调试Karma + AngularJS测试

Question

使用Angular 5.x，使用ng test通过Chrome调试器设置调试功能相当简单。只需使用Chrome Debugger Source选项卡在spec文件中放置断点，就可以在任何测试中放置断点，如下所示：

我们正在将AngularJS应用程序迁移到Angular，但无法重新创建此功能。我们已迁移到ES6 + Typescript。调试测试时，会出现此问题。 “背景”下的一切都是空的：

有什么方法可以解决这个问题吗？

以下是基本情况：

karma.conf.js

const webpackConfig = require('./webpack-configs/webpack.common');
webpackConfig.devtool = 'sourcemaps';
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'webpack.tests.js'
    ],
    exclude: [
      'node_modules/**/*.spec.js'
    ],
    preprocessors: {
      'webpack.tests.js' : ['webpack']
    },
    webpack: {
      resolve: webpackConfig.resolve,
      module: webpackConfig.module
    },
    reporters: ['spec'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

webpack.common.js

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const webpack = require('webpack');

    module.exports = {
        entry: {
            app: './app.ts'
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, '../../', 'dist')
        },
        module: {
            // loaders go here
            rules: [
                {
                    test: /\.ts?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.css?$/,
                    // these are chained
                    // styleLoader(cssLoader(styles))
                    // so css-loader comes first
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /\.scss?$/,
                    // these are chained
                    // styleLoader(cssLoader(styles))
                    // so css-loader comes first
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                },
                {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    use: 'file-loader'
                },
                {
                    test: /\.html$/,
                    use: 'raw-loader'
                }
            ]
        },
        resolve: {
            extensions: [".ts", ".js"]
        },
        // this one injects script tag into index.html
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                filename: '[name].bundle.js',
                minChunks(module, count) {
                    var context = module.context;
                    return context && context.indexOf('node_modules') >= 0;

                }
            })
        ]
    };