ESLint error when trying to lint Angular templates [duplicate]

I have an Angular 10 app set up with eslint and prettier, which worked fine so far for linting Typescript files. I'm now trying to lint my component template files as well following this doc.

But when I run it with eslint . --ext .js,.ts,.component.html --fix I keep getting

Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.


My .eslintrc.js looks like this (note the second block in the overrides section):

module.exports = {
extends: [
"pluginangular-eslint/recommended",
// For spec files
"plugin:jasmine/recommended",
// AirBnB Styleguide rules
"airbnb-typescript/base",
// Settings for Prettier
"prettier/@typescript-eslint",
"pluginrettier/recommended",
],
plugins: [
"prettier",
"jasmine",
],
rules: {
"import/no-unresolved": "off",
"@angular-eslint/component-selector": [
"error", { type: "element", prefix: "icc", style: "kebab-case" }
],
"@angular-eslint/directive-selector": [
"error", { type: "attribute", prefix: "icc", style: "camelCase" }
],
"import/extensions": "off",
"@typescript-eslint/lines-between-class-members": "off",
"lines-between-class-members": "off",
"class-methods-use-this": "off",
"import/prefer-default-export": "off",
"prettier/prettier": ["error", {
"endOfLine":"auto"
}],
},
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
settings: {
'import/resolver': {
node: {
extensions: ['.ts', '.js'],
moduleDirectory: ['node_modules', 'src/app'],
}
}
},
overrides: [
{
files: ["*.component.ts"],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
plugins: ["@angular-eslint/template"],
processor: "@angular-eslint/template/extract-inline-html",
},
{
files: ["*.component.html"],
parser: "@angular-eslint/template-parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
plugins: ["@angular-eslint/template"],
},
{
files: ["src/**/*.spec.ts", "src/**/*.d.ts"],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.spec.json",
ecmaVersion: 2020,
sourceType: "module",
},
// Jasmine rules
extends: ["plugin:jasmine/recommended"],
// Plugin to run Jasmine rules
plugins: ["jasmine"],
env: { jasmine: true },
}
],
};


As you can see I specify parserOptions.project everywhere. I'm especially confused that the error message complains about something relating to @typescript-eslint/parser which is not the parser that should be used anyway for templates. Removing the parserOptions block from the overrides section does not make a difference.

I could set "@typescript-eslint/dot-notation": "off" for all the rules it complains about but obviously that's not ideal. Can somebody point me towards what I'm missing?

UPDATE: I've turned off all type-aware rules as Brad suggested. However, the error I'm now getting is:

TypeError: Cannot read property 'length' of undefined
Occurred while linting /path/to/src/app/app.component.html:1
at getUseStrictDirectives (/path/to/node_modules/eslint/lib/rules/strict.js:27:36)


But my app.component.html just looks like this:

<div class="content-root">
<router-outlet></router-outlet>
</div>


So once again, I'm lost.

UPDATE 2: I've finally managed to get it working by turning rule after rule off for the template parser as Brad suggested in his answer. My working overrides block now looks like this:

{
files: ["*.component.html"],
parser: "@angular-eslint/template-parser",
rules: {
"@typescript-eslint/dot-notation": "off",
"@typescript-eslint/no-implied-eval": "off",
"@typescript-eslint/no-throw-literal": "off",
"strict": "off",
"import/first": "off",
"lines-around-directive": "off"
},
plugins: ["@angular-eslint/template"],
},

Continue reading...