title: Having Angular Migrate TSLint to ESLint Banana-In-Box Error
body: <p>I'm running into significant issues with my migration from TSLint to ESLint for my Angular project.  The way I'm working is I'm creating a brand new project (currently in Angular 9), and then I upgrade to Angular 10.2.  I have followed the guidelines in <a href="https://github.com/angular-eslint/angular-eslint#migrating-from-codelyzer-and-tslint" rel="noreferrer">@angular-eslint/schematic process</a>, and I have run the npx tslint-to-eslint-config.  However, when I try to run ESLint via my Visual Studio Code extension, I get the following error as it tries to ESLint my app.component.ts file:</p>
  <pre><code>Error while loading rule '@angular-eslint/template/banana-in-box': You have used a rule which requires '@angular-eslint/template-parser' to be used as the 'parser' in your ESLint config.
  </code></pre>
  <p>The following is my .eslintrc.js file configuration:</p>
  <pre><code>module.exports = {
  &quot;env&quot;: {
      &quot;browser&quot;: true,
      &quot;es6&quot;: true,
      &quot;node&quot;: true
  },
  &quot;extends&quot;: [
      &quot;plugin:@typescript-eslint/recommended&quot;,
      &quot;plugin:@typescript-eslint/recommended-requiring-type-checking&quot;
  ],
  &quot;ignorePatterns&quot;: [&quot;node_modules/**/*&quot;, &quot;**/node_modules/**/*&quot;, &quot;dist/**/*&quot;],
  &quot;parser&quot;: &quot;@typescript-eslint/parser&quot;,
  &quot;parserOptions&quot;: {
      &quot;project&quot;: &quot;tsconfig.json&quot;,
      &quot;sourceType&quot;: &quot;module&quot;
  },
  &quot;plugins&quot;: [
      &quot;eslint-plugin-import&quot;,
      &quot;eslint-plugin-jsdoc&quot;,
      &quot;@angular-eslint/eslint-plugin&quot;,
      &quot;@angular-eslint/eslint-plugin-template&quot;,
      &quot;eslint-plugin-prefer-arrow&quot;,
      &quot;@typescript-eslint&quot;,
      &quot;@typescript-eslint/tslint&quot;
  ],
  &quot;rules&quot;: {
    ...
    &quot;@angular-eslint/template/banana-in-box&quot;: &quot;error&quot;,
    ...
  },
  root: true,
  &quot;overrides&quot;: [
    {
      &quot;files&quot;: [&quot;*.ts&quot;],
      &quot;parserOptions&quot;: {
        &quot;project&quot;: [
          &quot;tsconfig.*?.json&quot;,
          &quot;e2e/tsconfig.json&quot;
        ],
        &quot;createDefaultProgram&quot;: true
      },
      &quot;extends&quot;: [
        &quot;plugin:@angular-eslint/recommended&quot;,
        &quot;plugin:@angular-eslint/ng-cli-compat&quot;,
        &quot;plugin:@angular-eslint/ng-cli-compat--formatting-add-on&quot;,
        &quot;plugin:@angular-eslint/template/process-inline-templates&quot;
      ],
      &quot;rules&quot;: {
        &quot;@angular-eslint/component-selector&quot;: [
          &quot;error&quot;, { &quot;type&quot;: &quot;element&quot;, &quot;prefix&quot;: &quot;app&quot;, &quot;style&quot;: &quot;kebab-case&quot; }
        ],
        &quot;@angular-eslint/directive-selector&quot;: [
          &quot;error&quot;, { &quot;type&quot;: &quot;attribute&quot;, &quot;prefix&quot;: &quot;app&quot;, &quot;style&quot;: &quot;camelCase&quot; }
        ],
        &quot;@typescript-eslint/explicit-member-accessibility&quot;: [
          &quot;off&quot;, { &quot;accessibility&quot;: &quot;explicit&quot; }
        ],
        &quot;arrow-parens&quot;: [
          &quot;off&quot;,
          &quot;always&quot;
        ],
        &quot;import/order&quot;: &quot;off&quot;
      }
    },
    {
      &quot;files&quot;: [
        &quot;*.html&quot;
      ],
      &quot;extends&quot;: [
        &quot;plugin:@angular-eslint/template/recommended&quot;
      ],
      &quot;rules&quot;: {}
    },
    {
      &quot;files&quot;: [&quot;*.component.html&quot;],
      &quot;extends&quot;: [&quot;plugin:@angular-eslint/template/recommended&quot;],
      &quot;rules&quot;: {
        &quot;max-len&quot;: [&quot;error&quot;, { &quot;code&quot;: 200 }]
      }
    },
    {
      &quot;files&quot;: [&quot;*.component.ts&quot;],
      &quot;extends&quot;: [&quot;plugin:@angular-eslint/template/process-inline-templates&quot;]
    }
  ]};
  </code></pre>
  <p>Every time I try to add that template as an extension, it gives me another error.  The only thing that stops the error is if I comment that rule out.  Can someone help me figure out how to get this rule to work and eliminate this error?</p>