angular - Karma DEBUG RUNNER 中没有 Angular 源映射

Question

自从最近升级到最新的 angular-cli 和 angular 后，我在 Chrome Karma 调试运行器 中不再看到源映射。

做了一些研究后，我遇到了 ng test --sourcemaps=true 选项，但这没有任何区别，没有 webpack:// 文件夹就像以前在 chrome 调试工具源选项卡中一样。

ng -v 日志:

@angular/cli: 1.1.3
node: 6.9.4
os: win32 x64
@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/cli: 1.1.3
@angular/compiler-cli: 4.2.4
@angular/language-service: 4.2.4

karma .conf:

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular/cli'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            //require('karma-coverage-istanbul-reporter'),
            require('@angular/cli/plugins/karma')
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        // coverageIstanbulReporter: {
        //     reports: ['html', 'lcovonly'],
        //     fixWebpackSourcePaths: true
        // },
        angularCli: {
            environment: 'dev'
        },
        reporters: ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        browsers: ['Chrome'],
        logLevel: config.LOG_DEBUG,
        autoWatch: true,
        singleRun: false,
        sourceMaps: true,
        captureTimeout: 25000,
        browserDisconnectTolerance: 3, //this one helps
        browserDisconnectTimeout: 25000,
        browserNoActivityTimeout: 25000,
        skipFiles: [
            "node_modules/**/*"
        ],
        webRoot: "${workspaceRoot}"
    });
};

Answer 1

正如@jenson-button-event 所说，这个错误已经被修复，但似乎最新的@angular/cli 1.2.1 版本还没有包含修复。

所以我的临时解决方法是:

转到 YOUR_PROJECT/node_modules/@angular/cli/models/

打开 common.js 并删除以下代码块:

if (buildOptions.sourcemaps) {
  extraPlugins.push(new webpack.SourceMapDevToolPlugin({
    filename: '[file].map[query]',
    moduleFilenameTemplate: '[resource-path]',
    fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
    sourceRoot: 'webpack:///'
  }));
}

打开 browser.js 并在 return 关键字之前插入上面删除的代码(第 37 行)

                        || module.resource.startsWith(realNodeModules));
        }
    }));
}
//START !!!
if (buildOptions.sourcemaps) {
  extraPlugins.push(new webpack.SourceMapDevToolPlugin({
    filename: '[file].map[query]',
    moduleFilenameTemplate: '[resource-path]',
    fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
    sourceRoot: 'webpack:///'
  }));
}
//END !!!
return {
    plugins: [
        new HtmlWebpackPlugin({

另一个解决方案是降级到以前的 angular-cli 版本(因为我读到这个错误从 1.0.6 开始重现)但它不适合我，因为降级后我遇到了很多编译错误。