Angular 15中ESLint校验HTML文件报Cannot read properties of undefined错误

问题背景 #

搭建Angular 15项目时，TS文件的ESLint校验和自动修复功能正常。为让ESLint支持HTML文件校验，安装了eslint-plugin-html，但在HTML文件的overrides配置中添加extends: ['plugin:@angular-eslint/template/recommended']后，会抛出错误：TypeError: Cannot read properties of undefined (reading '0')，错误指向"indent"规则，即使HTML首行是注释也会触发；移除该extends配置行后，HTML文件完全不被校验。需要找到正确配置ESLint处理HTML文件的方法。

当前配置文件 #

.eslintrc.js #

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard-with-typescript'
  ],
  overrides: [
    {
      files: [
        '*.ts'
      ],
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        '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: [
        '*.html'
      ],
      plugins: [
        'html'
      ],
      extends: [
        'plugin:@angular-eslint/template/recommended'
      ],
      rules: {}
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: 'tsconfig.json'
  }
}

package.json #

{
  "name": "catshop",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "bootstrap": "^5.2.3",
    "eslint-plugin-html": "^7.1.0",
    "rxjs": "~7.5.0",
    "stylelint": "^14.16.0",
    "stylelint-config-standard-scss": "^6.1.0",
    "stylelint-scss": "^4.3.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.3",
    "@angular-eslint/builder": "15.1.0",
    "@angular-eslint/eslint-plugin": "^15.1.0",
    "@angular-eslint/eslint-plugin-template": "15.1.0",
    "@angular-eslint/schematics": "15.1.0",
    "@angular-eslint/template-parser": "15.1.0",
    "@angular/cli": "~15.0.3",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "@typescript-eslint/eslint-plugin": "^5.46.1",
    "@typescript-eslint/parser": "5.44.0",
    "eslint": "^8.29.0",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.6.0",
    "eslint-plugin-promise": "^6.1.1",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "^4.8.4"
  }
}

node_modules中@angular-eslint结构 #

排查方向与解决方案建议 #

1. 移除冲突的eslint-plugin-html依赖 #

@angular-eslint/template已经内置了HTML文件的解析和处理能力，不需要额外安装eslint-plugin-html，两者共存会导致解析逻辑冲突，引发报错。

• 执行命令卸载依赖：

  npm uninstall eslint-plugin-html
  

• 同时修改.eslintrc.js中HTML的overrides配置，删除plugins: ['html']这一行。

2. 统一@angular-eslint相关包版本 #

确保所有@angular-eslint开头的开发依赖版本完全一致，避免版本差异导致的兼容问题。执行以下命令强制统一为15.1.0版本：

npm install @angular-eslint/builder@15.1.0 @angular-eslint/eslint-plugin@15.1.0 @angular-eslint/eslint-plugin-template@15.1.0 @angular-eslint/schematics@15.1.0 @angular-eslint/template-parser@15.1.0 --save-dev

3. 单独测试indent规则 #

暂时禁用HTML的indent规则，验证是否是该规则导致的报错：
修改.eslintrc.js中HTML的overrides的rules部分：

rules: {
  '@angular-eslint/template/indent': 'off'
}

如果不再报错，说明是indent规则的配置问题，可以尝试手动指定规则参数：

'@angular-eslint/template/indent': ['error', 2]

4. 清理缓存后重新校验 #

ESLint或Angular的缓存可能导致异常，清理后重新运行lint：

npx eslint --cache-clear
ng cache clean
npm run lint

5. 检查TS配置路径 #

确认.eslintrc.js中parserOptions.project指向的tsconfig.json路径正确，若tsconfig在子目录需调整为相对路径（例如./src/tsconfig.json）。

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