[@typescript-eslint/no-unused-vars] Unused import.

[infacto]

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have read the FAQ and my problem is not listed.

Repro

{
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
  }
}

import { Component, Inject } from '@angular/core';
import { appRoutes } from 'src/routes'; // <-- appRoutes is underlined. 

@Component(/*...*/)
export class MyPage {
  constructor(
    @Inject(appRoutes) public readonly appRoutes: string[]
  ) {}
}

'appRoutes' is defined but never used. (eslint@typescript-eslint/no-unused-vars)

Expected Result

appRoutes is used in @Inject(...).

Actual Result

Claims appRoutes (on import) as unused.

Additional Info

Note: The variable in import is not grayed out (indicator for unused in vscode). TypeScript detects it as in-use.
Generally unused imports are grayed out (opacity about 0.5) and marked as unused, even from TypeScript. So this should be reported from the linter. Or is there something wrong?

Current workaround:

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { appRoutes } from 'src/routes'; 

Versions

Updated to the latest version for this issue. (Initial version was ^4.2.0)

package	version
@typescript-eslint/eslint-plugin	4.15.1
@typescript-eslint/parser	4.15.1
TypeScript	4.0.5
ESLint	7.20.0
node	14.15.1

[bradzacher]

duplicate of #2994