Angular 15迁移至16.2.x后ESLint parserOptions.project配置报错

问题描述 #

将Angular 15迁移至16.2.x并同步升级ESLint至^8.39.0后，出现如下错误：

您尝试使用的lint规则需要完整的TypeScript类型检查器，但在projectname项目ESLint配置的相关TypeScript文件"overrides"块中，未配置parserOptions.project指向项目的tsconfig.json文件。

已尝试的操作：

• 禁用angular-eslint/template相关规则
• 在根parserOptions.project中显式设置tsconfig路径

项目目录结构：

• projectname
  • frontend
    • src
    • .eslintrc.js
    • angular.json
    • package.json
    • tsconfig.json

迁移已完成，但即使配置了根parserOptions.project，ESLint仍报错。

问题分析 #

查看你的.eslintrc.js配置，存在两个核心问题：

1. overrides的文件匹配规则错误：files中的'src/'会匹配整个src目录下的所有文件（包括TS文件），导致TS文件被错误应用HTML规则集，引发配置冲突。
2. HTML规则集依赖类型检查但未配置对应参数：plugin:@angular-eslint/template/recommended中的部分规则依赖TypeScript类型检查，但overrides区块未单独配置parserOptions.project，根配置的参数不会自动继承到overrides中。

解决方案 #

1. 修正overrides的文件匹配范围 #

将overrides中的files配置修改为仅匹配HTML文件，避免影响TS文件：

overrides: [
  {
    // 移除'src/'，仅匹配HTML文件
    files: ['*.component.html', 'src/index.html'],
    extends: ['plugin:@angular-eslint/template/recommended'],
    plugins: ['@angular-eslint/template'],
    rules: {
      '@angular-eslint/template/cyclomatic-complexity': 'off',
      '@angular-eslint/template/no-call-expression': 'off',
      'spaced-comment': 'off'
    }
  }
]

2. 在overrides中补充parserOptions配置（若仍报错） #

如果修正文件匹配后错误依旧，在HTML规则的overrides区块中添加parserOptions.project配置，指向项目的tsconfig文件：

overrides: [
  {
    files: ['*.component.html', 'src/index.html'],
    parserOptions: {
      project: [
        'src/tsconfig.json',
        'src/tsconfig.spec.json',
        'src/tsconfig.app.json'
      ]
    },
    extends: ['plugin:@angular-eslint/template/recommended'],
    plugins: ['@angular-eslint/template'],
    rules: {
      '@angular-eslint/template/cyclomatic-complexity': 'off',
      '@angular-eslint/template/no-call-expression': 'off',
      'spaced-comment': 'off'
    }
  }
]

3. 移除过时的createDefaultProgram配置 #

Angular 16搭配的@typescript-eslint v6+版本已不再需要createDefaultProgram: true，该配置会降低lint性能，建议从根parserOptions中删除：

parserOptions: {
  project: [
    'src/tsconfig.json',
    'src/tsconfig.spec.json',
    'src/tsconfig.app.json'
  ]
  // 移除createDefaultProgram: true
}

验证 #

修改配置后，运行npm run lint或ng lint验证错误是否消失。

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