源映射在 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 来查找和查看文件。该代码对于 specs 是可读的。
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。