升级Angular与ESLint后ng lint无法识别eslint.config.mjs的解决问询

你在将 Angular 16.2.0 升级到 18.2.2、ESLint 8.46 升级到 9.9.1 后，生成了 eslint.config.mjs 但运行 ng lint 报错"An unhandled exception occurred: No ESLint configuration found in my-app/src/app"，可以按以下步骤排查解决：

• 确认配置文件的位置与命名
  ESLint 9 默认识别项目根目录（与 angular.json 同级）的 eslint.config.mjs，而非 src/app 下的配置。如果你的配置文件在 src/app 内，将其移动到项目根目录；同时确保文件名是 eslint.config.mjs（必须是 .mjs 后缀，不能用 .js 或 .cjs）。

• 更新 Angular ESLint 插件版本
  Angular 18 需要配套的最新版 @angular-eslint 插件，旧版本不支持 ESLint 9 的新配置格式。执行以下命令更新：

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

• 修正 angular.json 中的 lint 配置
  打开 angular.json，找到对应项目的 lint 节点，确保配置指向根目录的 eslint.config.mjs，并使用正确的构建器。示例配置如下：

  "lint": {
    "builder": "@angular-eslint/builder:lint",
    "options": {
      "lintFilePatterns": [
        "src/**/*.ts",
        "src/**/*.html"
      ],
      "eslintConfig": "./eslint.config.mjs"
    }
  }
  

  注意：如果之前配置里有 configFile 字段，需要替换为 eslintConfig（这是新版 Angular ESLint 插件的字段名）。

• 清理缓存与依赖
  清理旧依赖和缓存，避免版本冲突：

  rm -rf node_modules package-lock.json
  npm install
  ng cache clean
  

• 验证 eslint.config.mjs 的语法正确性
  ESLint 9 采用 ES 模块格式的配置，确保你的 eslint.config.mjs 使用正确的 ES 模块语法，比如用 export default 导出配置数组。基础示例：

  import angularESLint from '@angular-eslint/eslint-plugin';
  import angularESLintTemplate from '@angular-eslint/eslint-plugin-template';
  import typescriptESLint from '@typescript-eslint/eslint-plugin';
  import tsParser from '@typescript-eslint/parser';
  
  export default [
    {
      files: ['**/*.ts'],
      languageOptions: {
        parser: tsParser,
        ecmaVersion: 'latest',
        sourceType: 'module'
      },
      plugins: {
        '@angular-eslint': angularESLint,
        '@typescript-eslint': typescriptESLint
      },
      rules: {
        // 自定义TS规则
      }
    },
    {
      files: ['**/*.html'],
      plugins: {
        '@angular-eslint/template': angularESLintTemplate
      },
      rules: {
        // 自定义HTML模板规则
      }
    }
  ];
  

  若配置中存在 require 等 CommonJS 语法，需替换为 import，因为 .mjs 文件默认是 ES 模块。

• 移除遗留的旧配置文件
  检查 src/app 目录下是否存在旧版 ESLint 配置文件（如 .eslintrc.json、.eslintrc.js），这些文件会干扰新配置的识别，若存在直接删除。

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