启用Istanbul-Instrumenter-Loader后Angular ng serve报意外字符'#'错误

我们为Angular自定义了如下Webpack配置文件，用于配置Cypress输出Sonar所需的代码覆盖率：

// configure cypress to output code coverage for sonar
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        loader: 'istanbul-instrumenter-loader',
        options: { esModules: true },
        enforce: 'post',
        include: require('path').join(__dirname, '..', 'src'),
        exclude: [
          /\.(e2e|spec)\.ts$/,
          /node_modules/,
          /(ngfactory|ngstyle)\.js/
        ]
      }
    ]
  }
};

执行ng serve时，出现如下错误：

./src/app/app.module.ts - Error: Module build failed (from ./node_modules/istanbul-instrumenter-loader/dist/cjs.js):
SyntaxError: Unexpected character '#' (106:11)

注释掉该规则后应用可正常运行，但我们需要此规则来生成单元测试的代码覆盖率，请问启用该规则时错误的原因是什么？

错误原因分析 #

1. istanbul-instrumenter-loader版本兼容性问题
   这个loader基于旧版Istanbul（v1），不支持ES6+的私有类字段语法（即代码中#开头的私有属性）。如果你的Angular项目使用了TypeScript的私有类字段特性，编译后的代码会保留#语法，旧版loader无法解析这种新语法，直接抛出错误。

2. 规则应用范围不当
   当前配置将这个loader作为post类型规则，应用到了src目录下所有js/ts文件，包括ng serve开发环境的编译产物。开发环境的代码可能保留了未完全转译的ES新特性，而该loader不具备处理这些内容的能力。

3. 工具使用场景错误
   istanbul-instrumenter-loader是专为单元测试覆盖率设计的工具，不应该在开发构建流程（ng serve）中启用。你错误地在开发环境中加入了测试用的覆盖率工具，导致开发代码处理流程异常。

解决方向 #

• 替换兼容新语法的loader：改用@jsdevtools/coverage-istanbul-loader，它基于新版Istanbul（v2+），支持私有类字段等ES新特性。
• 限制规则仅在测试环境生效：修改Webpack配置，只在Cypress测试运行的环境中启用该覆盖率规则，避免影响ng serve的开发构建。
• 调整TypeScript编译配置：在tsconfig.json中将target设置为较低的ES版本（比如ES5），让TypeScript把私有类字段转译为旧语法，确保loader能正常解析。

内容的提问来源于stack exchange，提问作者Get Off My Lawn