使用 custom-webpack 和 istanbul-instrumenter-loader “无法读取未定义的属性‘标志’”

Question

我的目标是在 Angular 12 中获得 Protractor (v 7) E2E 测试的动态代码覆盖率。

我正在关注这个话题： Code coverage for Protractor tests in Angular 5 Application

据说https://www.npmjs.com/package/protractor-istanbul-plugin 不适用于 Angular 12，所以我正在尝试 customWebpackConfig 和 istanbul-instrumenter-loader，但在尝试构建项目时遇到以下错误。 我真的很难设置这样的东西，所以任何帮助都将不胜感激！

错误信息

ng 构建

Generating browser application bundles (phase: setup)...
An error occurred during the build:
TypeError: Cannot read property 'flags' of undefined
    at checkUnreachable (myprojectpath\node_modules\typescript\lib\typescript.js:43458:31)
    at bindChildren (myprojectpath\node_modules\typescript\lib\typescript.js:40978:17)
    at bind (myprojectpath\node_modules\typescript\lib\typescript.js:42548:21)
    at bindSourceFile (myprojectpath\node_modules\typescript\lib\typescript.js:40523:17)
    at Object.bindSourceFile (myprojectpath\node_modules\typescript\lib\typescript.js:40460:9)
    at initializeTypeChecker (myprojectpath\node_modules\typescript\lib\typescript.js:79672:20)
    at Object.createTypeChecker (myprojectpath\node_modules\typescript\lib\typescript.js:44614:9)
    at Object.getTypeChecker (myprojectpath\node_modules\typescript\lib\typescript.js:107350:79)
    at new NgCompiler (myprojectpath\node_modules\@angular\compiler-cli\src\ngtsc\core\src\compiler.js:199:99)
    at Function.NgCompiler.fromTicket (myprojectpath\node_modules\@angular\compiler-cli\src\ngtsc\core\src\compiler.js:238:28)
    at new NgtscProgram (myprojectpath\node_modules\@angular\compiler-cli\src\ngtsc\program.js:95:47)
    at AngularWebpackPlugin.updateAotProgram (myprojectpath\node_modules\@angular-builders\custom-webpack\node_modules\@ngtools\webpack\src\ivy\plugin.js:310:32)
    at myprojectpath\node_modules\@angular-builders\custom-webpack\node_modules\@ngtools\webpack\src\ivy\plugin.js:187:24
    at Hook.eval [as call] (eval at create (myprojectpath\node_modules\@angular-builders\custom-webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:24:1)
    at Hook.CALL_DELEGATE [as _call] (myprojectpath\node_modules\@angular-builders\custom-webpack\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (myprojectpath\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:1043:30)
An unhandled exception occurred: Cannot read property 'flags' of undefined

---

我的配置

myprojectpath\package.json

"devDependencies": {
    "@angular-builders/custom-webpack": "^12.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular/cli": "~12.0.5",
    "@angular/compiler-cli": "~12.0.5",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "browserify-istanbul": "^3.0.1",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.6.0",
    "typescript": "~4.2.3"
  }

---

myprojectpath\angular.json

     "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            ...
            "customWebpackConfig": {"path": "./custom-webpack.config.js"}
          },

---

myprojectpath\custom-webpack.config.js

const path = require("path");
 
module.exports = {
  module: {
    rules: [
      {
          test: /\.js$/, //TODO: should this point to the test subdir? Problem: unexpected token when trying to add the slash for the dir
          use: {
            loader: 'istanbul-instrumenter-loader',
            options: {
                //
            }
          }
      }
    ]
  }
};

---

myprojectpath\test\conf.js

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['todo-spec.js']
};

---

myprojectpath\test\todo-spec.js

describe('demo test', function() {
  it('describtion', function() {
    browser.get('http://localhost:4200/');

    expect(...);
  });
});

根据原始线程的后续步骤将是

1. 在仪器包上运行您的 e2e/IT 测试套件

webdriver-manager start
test\protractor conf.js

1. 从浏览器上下文中收集您的伊斯坦布尔 coverage(window.__ coverage__) json 并将其保存为 coverage.json 文件。生成可见 使用伊斯坦布尔 cmets 报告伊斯坦布尔报告（伊斯坦布尔应该是 全局安装），它将生成coverage/lcov-report文件夹 html 文件以查看每个文件的代码覆盖率报告。

Answer 1

我现在能够构建解决方案。我的 packages.json 现在看起来像这样：

  "devDependencies": {
    "@angular-builders/custom-webpack": "^12.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~12.2.16",
    "@angular/cli": "~12.2.16",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "protractor": "~7.0.0",
    "typescript": "~4.3.5"
  }

---

我还必须增加 angular.json 中的预算大小，并且必须深入研究 istanbul-instrumenter-loader 的源代码，以允许在任何地方定义导入和导出：

\node_modules\istanbul-instrumenter-loader\node_modules\istanbul-lib-instrument\dist\instrumenter.js:121

   var ast = babylon.parse(code, {
        allowReturnOutsideFunction: opts.autoWrap, allowImportExportEverywhere: true, //CUSTOM EDIT: added allowImportExportEverywhere here
        sourceType: opts.esModules ? "module" : "script",
        plugins: ['asyncGenerators', 'dynamicImport', 'objectRestSpread', 'flow', 'jsx']
    });