title: ESLint error when trying to lint Angular templates
body: <p>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 <a href="https://github.com/angular-eslint/angular-eslint#linting-templates-with-angular-eslint" rel="noreferrer">following this doc</a>.</p>
  <p>But when I run it with <code>eslint . --ext .js,.ts,.component.html --fix</code> I keep getting</p>
  <pre><code>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 &quot;parserOptions.project&quot; property for @typescript-eslint/parser.
  </code></pre>
  <p>My <code>.eslintrc.js</code> looks like this (note the second block in the <code>overrides</code> section):</p>
  <pre><code>module.exports = {
    extends: [
      &quot;plugin:@angular-eslint/recommended&quot;,
      // For spec files
      &quot;plugin:jasmine/recommended&quot;,
      // AirBnB Styleguide rules
      &quot;airbnb-typescript/base&quot;,
      // Settings for Prettier
      &quot;prettier/@typescript-eslint&quot;,
      &quot;plugin:prettier/recommended&quot;,
    ],
    plugins: [
      &quot;prettier&quot;,
      &quot;jasmine&quot;,
    ],
    rules: {
      &quot;import/no-unresolved&quot;: &quot;off&quot;,
      &quot;@angular-eslint/component-selector&quot;: [
        &quot;error&quot;, { type: &quot;element&quot;, prefix: &quot;icc&quot;, style: &quot;kebab-case&quot; }
      ],
      &quot;@angular-eslint/directive-selector&quot;: [
        &quot;error&quot;, { type: &quot;attribute&quot;, prefix: &quot;icc&quot;, style: &quot;camelCase&quot; }
      ],
      &quot;import/extensions&quot;: &quot;off&quot;,
      &quot;@typescript-eslint/lines-between-class-members&quot;: &quot;off&quot;,
      &quot;lines-between-class-members&quot;: &quot;off&quot;,
      &quot;class-methods-use-this&quot;: &quot;off&quot;,
      &quot;import/prefer-default-export&quot;: &quot;off&quot;,
      &quot;prettier/prettier&quot;: [&quot;error&quot;, {
        &quot;endOfLine&quot;:&quot;auto&quot;
      }],
    },
    parser: &quot;@typescript-eslint/parser&quot;,
    parserOptions: {
      project: &quot;./tsconfig.app.json&quot;,
      ecmaVersion: 2020,
      sourceType: &quot;module&quot;,
    },
    settings: {
      'import/resolver': {
        node: {
          extensions: ['.ts', '.js'],
          moduleDirectory: ['node_modules', 'src/app'],
        }
      }
    },
    overrides: [
      {
        files: [&quot;*.component.ts&quot;],
        parser: &quot;@typescript-eslint/parser&quot;,
        parserOptions: {
          project: &quot;./tsconfig.app.json&quot;,
          ecmaVersion: 2020,
          sourceType: &quot;module&quot;,
        },
        plugins: [&quot;@angular-eslint/template&quot;],
        processor: &quot;@angular-eslint/template/extract-inline-html&quot;,
      },
      {
        files: [&quot;*.component.html&quot;],
        parser: &quot;@angular-eslint/template-parser&quot;,
        parserOptions: {
          project: &quot;./tsconfig.app.json&quot;,
          ecmaVersion: 2020,
          sourceType: &quot;module&quot;,
        },
        plugins: [&quot;@angular-eslint/template&quot;],
      },
      {
        files: [&quot;src/**/*.spec.ts&quot;, &quot;src/**/*.d.ts&quot;],
        parser: &quot;@typescript-eslint/parser&quot;,
        parserOptions: {
          project: &quot;./tsconfig.spec.json&quot;,
          ecmaVersion: 2020,
          sourceType: &quot;module&quot;,
        },
        // Jasmine rules
        extends: [&quot;plugin:jasmine/recommended&quot;],
        // Plugin to run Jasmine rules
        plugins: [&quot;jasmine&quot;],
        env: { jasmine: true },
      }
    ],
  };
  </code></pre>
  <p>As you can see I specify <code>parserOptions.project</code> everywhere. I'm especially confused that the error message complains about something relating to <code>@typescript-eslint/parser</code> which is not the parser that should be used anyway for templates. Removing the <code>parserOptions</code> block from the overrides section does not make a difference.</p>
  <p>I could set <code>&quot;@typescript-eslint/dot-notation&quot;: &quot;off&quot;</code> for all the rules it complains about but obviously that's not ideal. Can somebody point me towards what I'm missing?</p>
  <p><strong>UPDATE</strong>: I've turned off all type-aware rules as Brad suggested. However, the error I'm now getting is:</p>
  <pre><code>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)
  </code></pre>
  <p>But my <code>app.component.html</code> just looks like this:</p>
  <pre><code>&lt;div class=&quot;content-root&quot;&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  <p>So once again, I'm lost.</p>
  <p><strong>UPDATE 2</strong>: 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 <code>overrides</code> block now looks like this:</p>
  <pre><code>{
    files: [&quot;*.component.html&quot;],
    parser: &quot;@angular-eslint/template-parser&quot;,
    rules: {
      &quot;@typescript-eslint/dot-notation&quot;: &quot;off&quot;,
      &quot;@typescript-eslint/no-implied-eval&quot;: &quot;off&quot;,
      &quot;@typescript-eslint/no-throw-literal&quot;: &quot;off&quot;,
      &quot;strict&quot;: &quot;off&quot;,
      &quot;import/first&quot;: &quot;off&quot;,
      &quot;lines-around-directive&quot;: &quot;off&quot;
    },
    plugins: [&quot;@angular-eslint/template&quot;],
  },
  </code></pre>