4

由于最近升级到最新的angular-cliand angular，我不再在 Chrome 中看到 source-maps Karma debug runner。

做了一些研究后，我发现了这个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

业力.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}"
    });
};
4

2 回答 2

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 开始重现时）但它不适合我，因为我在降级后遇到了很多编译错误。

于 2017-07-16T16:47:25.687 回答
0

这已修复，请参阅最新 angular-cli 版本中的https://github.com/angular/angular-cli/pull/6862

于 2017-07-06T06:16:48.637 回答