伊斯坦布尔工具加载程序无法找到Angular2组件的源映射。

Question

我试着用业力、茉莉花、webpack搭建angular2脚手架，从网上跟踪各种消息来源，以加深了解。

我使用伊斯坦布尔-仪表-装载机来报告业力报道。

当我运行npm test时，我得到以下输出：

ksharifbd:provat Admin$ npm test

> provat@0.0.1 test /Users/Admin/Downloads/kamal/development/self/provat
> karma start ./testconfig/karma/karma.conf.js --browsers Chrome

root directory: /Users/Admin/Downloads/kamal/development/self/provat
source directory: /Users/Admin/Downloads/kamal/development/self/provat/src

webpack: bundle is now VALID.
webpack: bundle is now INVALID.
ts-loader: Using typescript@2.0.3 and /Users/Admin/Downloads/kamal/development/self/provat/tsconfig.json
22 10 2016 18:48:15.719:WARN [karma]: No captured browser, open http://localhost:9876/

webpack: bundle is now VALID.
22 10 2016 18:48:15.741:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
22 10 2016 18:48:15.742:INFO [launcher]: Launching browser Chrome with unlimited concurrency
22 10 2016 18:48:15.859:INFO [launcher]: Starting browser Chrome
22 10 2016 18:48:17.420:INFO [Chrome 54.0.2840 (Mac OS X 10.10.4)]: Connected on socket /#m-tmeGM-JMz_OSU4AAAA with id 80103692
Chrome 54.0.2840 (Mac OS X 10.10.4): Executed 1 of 1 SUCCESS (0.129 secs / 0.104 secs)
Error: Could not find source map for: "/Users/Admin/Downloads/kamal/development/self/provat/src/modules/greetings/component/greetings.component.ts"
at /Users/Admin/Downloads/kamal/development/self/provat/node_modules/remap-istanbul/lib/remap.js:257:11
at Array.forEach (native)
at /Users/Admin/Downloads/kamal/development/self/provat/node_modules/remap-istanbul/lib/remap.js:214:22
at Array.forEach (native)
at remap (/Users/Admin/Downloads/kamal/development/self/provat/node_modules/remap-istanbul/lib/remap.js:213:12)
at RemapCoverageReporter.onCoverageComplete (/Users/Admin/Downloads/kamal/development/self/provat/node_modules/karma-remap-coverage/remap-coverage.js:23:23)
at Server.<anonymous> (/Users/Admin/Downloads/kamal/development/self/provat/node_modules/karma/lib/events.js:13:22)
at emitTwo (events.js:106:13)
at Server.emit (events.js:191:7)
at InMemoryReport.writeReport (/Users/Admin/Downloads/kamal/development/self/provat/node_modules/karma-coverage/lib/in-memory-report.js:14:22)
at writeReport (/Users/Admin/Downloads/kamal/development/self/provat/node_modules/karma-coverage/lib/reporter.js:68:16)
at /Users/Admin/Downloads/kamal/development/self/provat/node_modules/karma-coverage/lib/reporter.js:290:11
at Array.forEach (native)
at Collection.forEach (/Users/Admin/Downloads/kamal/development/self/provat/node_modules/karma/lib/browser_collection.js:93:21)
at /Users/Admin/Downloads/kamal/development/self/provat/node_modules/karma-coverage/lib/reporter.js:247:16
at Array.forEach (native)

=============================== Coverage  summary===============================
Statements   : 82.35% ( 14/17 )
Branches     : 48.28% ( 14/29 )
Functions    : 100% ( 4/4 )
Lines        : 91.67% ( 11/12 )
================================================================================

我没有发布来自多个文件的输出，而是将所有代码都放在了在Github和自述上。

您的帮助将不胜感激。

Answer 1

我也面临着同样的问题，“伊斯坦布尔-工具-加载程序”有一个问题，将其降级为"^0.2.0“版本。

更改您的package.json并重新安装包

npm un  istanbul-instrumenter-loader --save-dev

和

npm i istanbul-instrumenter-loader@^0.2.0 --save-dev

以下是其中一个文件的覆盖率

​

​

Answer 2

我不确定降低istanbul-instrumenter-loader的评级是否有效。但将其降至最低并不是一种好的做法，而且总是合适的。这里的问题是，测试加载无法找到特定文件的源映射。而且在测试阶段也没有必要。因此，我们可以通过将"sourceMap": false添加到angular.json文件中的测试配置来修复这个问题，如下所示。

    "test": {
      "builder": "ngx-build-plus:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.spec.json",
        "karmaConfig": "karma.conf.js",
        "sourceMap": false,  // <---
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [],
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ]
      }
    },