title: Angular Eslint config is not extending Project Eslint config
body: <p>I have an angular 12.x project and it uses eslint, this is the current root configuration file:</p>
  <pre><code>{
    &quot;env&quot;: {
      &quot;browser&quot;: true,
      &quot;node&quot;: true
    },
    &quot;parser&quot;: &quot;@typescript-eslint/parser&quot;,
    &quot;parserOptions&quot;: {
      &quot;project&quot;: &quot;./tsconfig.base.json&quot;,
      &quot;sourceType&quot;: &quot;module&quot;
    },
    &quot;plugins&quot;: [
      &quot;eslint-plugin-import&quot;,
      &quot;@angular-eslint/eslint-plugin&quot;,
      &quot;@angular-eslint/eslint-plugin-template&quot;,
      &quot;@typescript-eslint&quot;
    ],
    &quot;extends&quot;: [&quot;prettier&quot;, &quot;eslint:recommended&quot;],
    &quot;rules&quot;:{... lots of rules}
  }
  </code></pre>
  <p>One of the rules I need to work is the <a href="https://github.com/typescript-eslint/typescript-eslint/blob/v4.28.5/packages/eslint-plugin/docs/rules/member-ordering.md#default-configuration" rel="nofollow noreferrer">member-ordering as described on their docs</a>.</p>
  <p>I have a libs (created using NX) that are re-usable components, let me use MyComponent for this example. That component has its own eslintrc which extends the root one, below its contents:</p>
  <pre><code>{
    &quot;extends&quot;: [&quot;../../../.eslintrc.json&quot;], //path to the root eslintrc
    &quot;ignorePatterns&quot;: [&quot;!**/*&quot;],
    &quot;overrides&quot;: [
      {
        &quot;files&quot;: [&quot;*.ts&quot;],
        &quot;extends&quot;: [
          &quot;plugin:@nrwl/nx/angular&quot;,
          &quot;plugin:@angular-eslint/template/process-inline-templates&quot;
        ],
        &quot;rules&quot;: {
          &quot;@angular-eslint/directive-selector&quot;: [
            &quot;error&quot;,
            {
              &quot;type&quot;: &quot;attribute&quot;,
              &quot;prefix&quot;: &quot;suppressed&quot;,
              &quot;style&quot;: &quot;camelCase&quot;
            }
          ],
          &quot;@angular-eslint/component-selector&quot;: [
            &quot;error&quot;,
            {
              &quot;type&quot;: &quot;element&quot;,
              &quot;prefix&quot;: &quot;suppressed&quot;,
              &quot;style&quot;: &quot;kebab-case&quot;
            }
          ]
        }
      },
      {
        &quot;files&quot;: [&quot;*.html&quot;],
        &quot;extends&quot;: [&quot;plugin:@nrwl/nx/angular-template&quot;],
        &quot;rules&quot;: {}
      }
    ]
  }
  </code></pre>
  <p>And this is <code>MyComponent</code> that uses uses the above eslintrc:</p>
  <pre><code>export class MyComponent implements OnInit, OnDestroy {
    constructor() {}
  
    ngOnInit(): void {}
  
    @Dispatch()
    clearState() {
      return new ViewActions.ClearState();
    }
  
    private functio() {
      return null;
    }
  
    static handle() {}
  
    ngOnDestroy(): void {
      this.clearState();
    }
  }
  </code></pre>
  <p>Based on the default config of the rule as per the doc I linked, the code above should have errors starting on the <code>@Dispatch()</code> all the way to the <code>destroy()</code> due to violation of the rule.</p>
  <p>But the output is different from the expected:
  <a href="https://i.stack.imgur.com/F5iFs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F5iFs.png" alt="component screenshot" /></a></p>
  <p>Now, if I add the rule config as per the docs, into my component eslintrc.json, it will work as expected which is: Method <code>clearState</code> will have the error, as it is annotated and it is expected to come before a non-annotated method, in this <code>ngOnInit</code> and errors for the private one as well.</p>
  <p>The actual problem is that the very first line on my component eslintrc.json has <code>extends</code> targeting the root eslintrc, and I wanted to have all my rules overridden on that file. If I change the member-ordering to the root eslintrc, the rule stops working and it is reverted to that error of the image added.</p>
  <p>Also, when running  <code>npx eslint --print-config .\my-component.ts</code> from my component directory, I get following config for member-ordering being applied:</p>
  <pre><code>&quot;@typescript-eslint/member-ordering&quot;: [
        &quot;error&quot;,
        {
          &quot;default&quot;: [
            &quot;static-field&quot;,
            &quot;instance-field&quot;,
            &quot;static-method&quot;,
            &quot;instance-method&quot;
          ]
        }
      ],
  </code></pre>
  <p>I really don't know where that is coming from.</p>
  <p>Does anyone know why my component eslint is not extending the rules from the root eslintrc?</p>
  <p>===== Update ==========</p>
  <p>Eslint related dependencies on package.json</p>
  <pre><code>&quot;@angular-eslint/eslint-plugin&quot;: &quot;1.1.0&quot;,
  &quot;@angular-eslint/eslint-plugin-template&quot;: &quot;1.1.0&quot;,
  &quot;@angular-eslint/template-parser&quot;: &quot;12.3.0&quot;,
  &quot;@nrwl/eslint-plugin-nx&quot;: &quot;12.9.0&quot;,
  &quot;@typescript-eslint/eslint-plugin&quot;: &quot;4.28.5&quot;,
  &quot;@typescript-eslint/eslint-plugin-tslint&quot;: &quot;4.12.0&quot;,
  &quot;@typescript-eslint/parser&quot;: &quot;4.28.5&quot;,
  &quot;eslint&quot;: &quot;7.32.0&quot;,
  &quot;eslint-config-prettier&quot;: &quot;8.1.0&quot;,
  &quot;eslint-plugin-cypress&quot;: &quot;2.10.3&quot;,
  &quot;eslint-plugin-import&quot;: &quot;2.24.0&quot;,
  &quot;@angular-eslint/schematics&quot;: &quot;12.3.1&quot;,
  </code></pre>