ESLint 9 - Missing visitor keys

I migrated my project to Angular 19 and I tried to migrate to ESLint 9.

I used the official migration method:

npx @eslint/migrate-config .eslintrc.json


and my .eslintrc.json file was migrated from:

{
"root": true,
"ignorePatterns": [
"projects/**/*",
"src/app/autogen/**/*",
"src/assets/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": "tsconfig.json",
"createDefaultProgram": true
},
"extends": [
"pluginangular-eslint/ng-cli-compat",
"pluginangular-eslint/ng-cli-compat--formatting-add-on",
"pluginangular-eslint/template/process-inline-templates",
"pluginrettier/recommended"
],
"rules": {
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"style": "kebab-case"
}
],
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
]
}
},
// NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
{
"files": [
"*.html"
],
"extends": [
"pluginangular-eslint/template/recommended"
],
"rules": {}
},
// NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
{
"files": [
"*.html"
],
"excludedFiles": [
"*inline-template-*.component.html"
],
"extends": [
"pluginrettier/recommended"
],
"rules": {
// NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
"prettier/prettier": [
"error",
{
"parser": "angular"
}
]
}
}
]
}


to eslint.config.mjs file:

import { defineConfig, globalIgnores } from "eslint/config";
import path from "nodeath";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all
});

export default defineConfig([
globalIgnores(["projects/**/*", "src/app/autogen/**/*", "src/assets/**/*"]),
{
files: ["**/*.ts"],

extends: compat.extends(
"pluginangular-eslint/recommended",
"pluginangular-eslint/template/process-inline-templates",
"pluginrettier/recommended",
),

languageOptions: {
ecmaVersion: 5,
sourceType: "script",

parserOptions: {
project: "tsconfig.json",
createDefaultProgram: true,
},
},

rules: {
"@angular-eslint/component-selector": ["error", {
type: "element",
style: "kebab-case",
}],

"@angular-eslint/directive-selector": ["error", {
type: "attribute",
prefix: "app",
style: "camelCase",
}],
},
},
{
files: ["**/*.html"],
extends: compat.extends("pluginangular-eslint/template/recommended"),
rules: {},
},
{
files: ["**/*.html"],
ignores: ["**/*inline-template-*.component.html"],
extends: compat.extends("pluginrettier/recommended"),

rules: {
"prettier/prettier": ["error", {
parser: "angular",
}],
},
},
]);


When I am trying to run npx eslint --fix, I get:

Oops! Something went wrong!
ESLint: 9.24.0
Error: Missing visitor keys for 'public helperService: HelperService'.

Continue reading...