'Component' is defined but never used - Angular

Question

We recently updated Angular to version 14 and all dependent packages to the most recent versions. After the update, we are receiving an eslint error stating that 'Component' is defined but never used unused-imports/no-unused-imports'  According to my knowledge, I believe Component we usually use in decorator and it is needed. Help me how to get rid of this warning.

import { Component } from '@angular/core';

@Component({
  selector: 'money-control',
  templateUrl: './money-control.component.html',
  styleUrls: ['./money-control.component.scss']
})
export class AMTabComponent { 
}

These are my configuration files for eslint .myapp.eslintrc.json

{
  "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/eslintrc.json",
  "root": false,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": [
      "tsconfig.json",
      "tsconfig.*.json"
    ],
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "unused-imports"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@angular-eslint/recommended"
  ],
  "rules": {
    "@angular-eslint/component-selector": [
      "error",
      {
        "type": "element",
        "prefix": "myapp",
        "style": "kebab-case"
      }
    ],
    "@angular-eslint/directive-selector": [
      "error",
      {
        "type": "attribute",
        "prefix": "myapp",
        "style": "camelCase"
      }
    ],
    "@angular-eslint/no-empty-lifecycle-method": "off",
    "@typescript-eslint/explicit-member-accessibility": [
      "off",
      {
        "accessibility": "explicit"
      }
    ],
    "arrow-parens": [
      "off",
      "always"
    ],
    "dot-notation": "error",
    "import/no-deprecated": "off",
    "import/order": "off",
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          "rxjs/Rx"
        ]
      }
    ],
    "@typescript-eslint/member-ordering": [
      "error",
      {
        "default": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": [
      "error"
    ],
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-expressions": [
      "error"
    ],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": [
      "error"
    ],
    "@typescript-eslint/quotes": [
      "error",
      "single"
    ],
    "unused-imports/no-unused-imports": "error",
    "@typescript-eslint/no-explicit-any": "off"
  }
}

.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "ignorePatterns": [
    "**/node_modules"
  ],
  "root": true,
  "overrides": [
    {
      "files": ["*.js"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaVersion": 2021,
        "sourceType": "module"
      },
      "extends": ["./.myapp.eslintrc.json"],
      "rules": {
        "@typescript-eslint/no-require-imports": "off",
        "node/no-restricted-modules": [
          "error",
          {
            "paths": [
              {
                "name": "rxjs/Rx",
                "message": "Please import directly from 'rxjs' instead"
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": ["tsconfig.json", "tsconfig.*.json"],
        "ecmaVersion": 2021,
        "sourceType": "module"
      },
      "extends": ["./.myapp.eslintrc.json"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/keyword-spacing": "error",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "prefer-const": "off",
        "@typescript-eslint/naming-convention": "off",
        "@typescript-eslint/no-unused-expressions": "off",
        "@typescript-eslint/no-use-before-define": "off",
        "prefer-arrow/prefer-arrow-functions": "off",
        "no-underscore-dangle": "off",
        "arrow-body-style": "off"
      },
      "settings": {
        "import/resolver": {
          "typescript": {
            "project": ["tsconfig.json", "tsconfig.*.json"]
          }
        }
      }
    },
    {
      "files": ["*.html"],
      "parser": "@angular-eslint/template-parser",
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {
        "@angular-eslint/template/banana-in-box": "error",
        "@angular-eslint/template/no-negated-async": "off",
        "@angular-eslint/template/eqeqeq": "error"
      }
    },
    {
      "files": ["*.component.ts"],
      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
    },
    {
      "files": ["*.po.ts", "*.mock.ts","*.spec.ts"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/keyword-spacing": "error",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "prefer-const": "off",
        "@typescript-eslint/naming-convention": "off",
        "@typescript-eslint/no-unused-expressions": "off",
        "@typescript-eslint/no-use-before-define": "off",
        "@typescript-eslint/return-await": "off",
        "prefer-arrow/prefer-arrow-functions": "off",
        "@typescript-eslint/return-await": "off",
        "no-underscore-dangle": "off",
        "arrow-body-style": "off"
      },
      "env": {
        "jasmine": true
      },
      "plugins": ["jasmine"],
      "extends": ["./.myapp.eslintrc.json"]
    }
  ]
}

Answer 1

Rerun angular schematics

When using ng add instead of using your package manager (npm/yarn/...) angular runs scripts called Angular Schematics. These automate changes needed for packages to work as intended. So, whenever a package author recommends using ng add you really want to do so, because the package comes with these schematics that would otherwise not run.

By uninstalling eslint and adding it again using ng add you will fix the problem without having to disable or ignore any rules.

Just run (depending on your preferred package manager):

yarn remove @angular-eslint/schematics

or:

npm uninstall @angular-eslint/schematics

and then:

ng add @angular-eslint/schematics

(and select 'y' for yes...)

Run these 2 commands, and that should fix your problem. You might need to give your IDE a minute to re-check the files.