angular - 源映射在 Angular2 的单元测试中不起作用

Question

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

总体来说，该模板效果非常好。但是，当我尝试调试单元测试(在 Chrome 中)时，代码难以理解。

我所做的是:

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

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

如何使源映射发挥作用？

我尝试修改 karma.conf.js 文件以删除对代码覆盖率报告(即 Istanbul 尔)的所有引用，请参见下文。但这对行为没有影响:

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 .