源图不在Angular2中的单元测试中工作

Question

我正在开发由angular-cli 1.0.0-beta.18生成的Angular2项目。

通常模板已经很好地完成了。但是，当我尝试调试单元测试时（在Chrome中），代码是无法理解的。

我的工作是：

1. 我通过运行ng test
开始测试
2. Google Chrome浏览器打开
3. 我可以在控制台中确认测试已运行：Executed 36 of 36...
4. 我现在想要调试测试，因此我点击了Chrome中的DEBUG按钮，这会打开一个新标签。
5. 在该标签中，我打开了开发人员工具。
6. 我现在可以使用Ctrl-P来查找和查看文件。该代码可用于规范。
7. 但是，当我打开实现代码时，我得到以下内容



看起来文件已被缩小或由代码覆盖率工具转换。考虑到__coverage__部分，后者似乎更有可能。源图显然没有效果。

如何使源地图有效？

我已尝试修改karma.conf.js文件以删除对代码覆盖率报告（即伊斯坦布尔）的所有引用，请参阅下文。但这在行为上没有区别：

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'angular-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('angular-cli/plugins/karma')
    ],
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

Answer 1

这实际上是known issue。它已在angular-cli 1.0.0-beta.19-3中修复。具体来说是this fix。