Angular项目配置ESLint触发Cannot read properties of undefined错误

报错信息 #

运行ESLint代码检查时触发如下错误：

Oops! Something went wrong! :(

ESLint: 8.56.0

TypeError: Cannot read properties of undefined (reading 'isStrict')
Occurred while linting C:\Users\MATM\Projekte\Test\src\app\app.component.ts\1_inline-template-app.component.ts-1.component.html:1
Rule: "no-eval"
    at Program (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\rules\no-eval.js:229:72)
    at ruleErrorHandler (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\linter.js:1076:28)
    at C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\node-event-generator.js:340:14)
    at CodePathAnalyzer.enterNode (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\code-path-analysis\code-path-analyzer.js:803:23)
    at C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\linter.js:1111:32

当前ESLint配置 #

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 'latest',
  },
  env: {
    node: true,
    browser: true,
  },
  extends: ['eslint:recommended', 'prettier'],
  overrides: [
    {
      files: ["**/*.ts"],
      extends: ["plugin:@typescript-eslint/recommended-type-checked"],
      plugins: ["@typescript-eslint"],
      parser: "@typescript-eslint/parser",
      parserOptions: {
        project: ['./tsconfig.app.json'],
        tsconfigRootDir: __dirname,
      },
    },
    {
      files: ["**/*.component.ts"],
      extends: [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
      ],
      rules: {
        "@angular-eslint/directive-selector": [
          "error",
          {
            type: "attribute",
            prefix: "app",
            style: "camelCase",
          },
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            type: "element",
            prefix: "app",
            style: "kebab-case",
          },
        ],
      },
    },
    {
      files: ["**/*.component.html"],
      extends: [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility",
      ],
      rules: {},
    },
  ],
};

问题原因 #

1. @angular-eslint/template/process-inline-templates插件处理内联模板时，会将模板转为虚拟JS文件，但ESLint原生no-eval规则无法正确识别这类虚拟文件的解析上下文，导致读取isStrict属性时出现undefined。
2. 配置存在覆盖冲突：.component.ts的规则块未继承.ts块的TypeScript解析器配置，处理内联模板时解析器上下文混乱，触发规则报错。

解决方案 #

方案1：针对内联模板禁用no-eval规则 #

修改.component.ts的规则配置，直接禁用该规则：

{
  files: ["**/*.component.ts"],
  extends: [
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
  ],
  rules: {
    "@angular-eslint/directive-selector": [
      "error",
      {
        type: "attribute",
        prefix: "app",
        style: "camelCase",
      },
    ],
    "@angular-eslint/component-selector": [
      "error",
      {
        type: "element",
        prefix: "app",
        style: "kebab-case",
      },
    ],
    // 禁用内联模板的no-eval规则
    "no-eval": "off"
  },
}

方案2：完善.component.ts的解析器配置 #

让.component.ts块继承TypeScript解析器配置，确保上下文一致：

{
  files: ["**/*.component.ts"],
  extends: [
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
  ],
  plugins: ["@typescript-eslint"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: ['./tsconfig.app.json'],
    tsconfigRootDir: __dirname,
  },
  rules: {
    "@angular-eslint/directive-selector": [
      "error",
      {
        type: "attribute",
        prefix: "app",
        style: "camelCase",
      },
    ],
    "@angular-eslint/component-selector": [
      "error",
      {
        type: "element",
        prefix: "app",
        style: "kebab-case",
      },
    ],
  },
}

方案3：升级依赖版本 #

ESLint 8.56.0与部分@angular-eslint插件可能存在兼容性问题，升级到最新稳定版：

npm update eslint @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser

验证 #

修改配置后，运行以下命令重新检查代码：

npx eslint src/**/*.ts src/**/*.html

内容的提问来源于stack exchange，提问作者Matthias Thalmann