@angular-eslint/use-pipe-transform-interface false positive

[jlabaj]

Hello,

I have updated to angular 12.1.0 from 11 and suddenly I am getting this false positive from my eslint:
These are my versions of @angular-eslint:
"@angular-eslint/builder": "12.3.1",
"@angular-eslint/eslint-plugin": "12.3.1",
"@angular-eslint/eslint-plugin-template": "12.3.1",
"@angular-eslint/schematics": "12.3.1",
"@angular-eslint/template-parser": "12.3.1",

[rafaelss95]

Hi @jlabaj, I couldn't reproduce it with 12.3.1. Would you mind to share your .eslintrc.js(on)?

Also note that we have a test case almost exactly the same as yours that is passing using the latest version:

angular-eslint/packages/eslint-plugin/tests/rules/use-pipe-transform-interface/cases.ts

Lines 12 to 15 in 8106486

	@Pipe({ name: 'test' })
	class Test implements PipeTransform {
	transform(value: string) {}
	}

[jlabaj]

@rafaelss95 sure:

{
    "root":true,
    "env":{
      "browser":true,
      "amd":true,
      "node":true
    },
    "globals":{
      "Blob":true,
      "document":true,
      "window":true,
      "Act":true,
      "Resources":true,
      "Marmind":true,
      "marmind":true,
      "Applications":true,
      "Collaboration":true,
      "console":true,
      "describe":true,
      "it":true,
      "expect":true,
      "inject":true,
      "beforeEach":true,
      "afterEach":true,
      "spyOn":true,
      "jasmine":true,
      "angular":true,
      "$":true,
      "_":true
    },
    "ignorePatterns": ["**/*.json"],
    "overrides":[
      {
        "files":[
          "*.js"
        ],
        "parser":"@typescript-eslint/parser",
        "parserOptions":{
          "ecmaVersion":2015,
          "sourceType":"module"
        },
        "extends":[
          "eslint:recommended"
        ],
        "rules":{
          "no-console":[
            "error",
            {
              "allow":[
                "warn",
                "error"
              ]
            }
          ]
        }
      },
      {
        "files":[
          "*.ts"
        ],
        "parser":"@typescript-eslint/parser",
        "parserOptions":{
          "project":"**/tsconfig.*?.json",
          "ecmaVersion":2020,
          "sourceType":"module"
        },
        "plugins":[
          "import",
          "@angular-eslint"
        ],
        "extends":[
          "eslint:recommended",
          "plugin:@typescript-eslint/eslint-recommended",
          "plugin:@typescript-eslint/recommended",
          "plugin:@angular-eslint/recommended"
        ],
        "rules":{
          "no-unreachable" :"error",
          "max-len": "off",
          "no-unused-vars": "off",
          "no-undef": "error",
          "@typescript-eslint/ban-ts-comment": "off",
          "@typescript-eslint/no-unused-vars":[
            "error",
            {
              "argsIgnorePattern":"^_"
            }
          ],
          "quotes":[
            "error",
            "single",
            {
              "allowTemplateLiterals":true
            }
          ],
          "@typescript-eslint/no-misused-promises":[
            "error"
          ],
          /*bug in this rule https://github.com/angular-eslint/angular-eslint/issues/662*/
           "@angular-eslint/use-pipe-transform-interface": "off",
          /*bug in this rule https://github.com/angular-eslint/angular-eslint/issues/663*/
           "@angular-eslint/no-output-on-prefix":"off"
        }
      }
    ]
}

and a second level eslintrc.json:

{
  "globals": {
    "Blob": true,
    "module": false,
    "document": true,
    "window": true,
    "Act": true,
    "Resources": true,
    "Marmind": true,
    "marmind": true,
    "Applications": true,
    "Collaboration": true,
    "console": true,
    "describe": true,
    "it": true,
    "expect": true,
    "inject": true,
    "beforeEach": true,
    "afterEach": true,
    "spyOn": true,
    "jasmine": true,
    "angular": true,
    "JQuery": true,
    "JQueryStatic": true,
    "$": true,
    "_": true
  },
  "overrides": [
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": "**/tsconfig.*?.json",
        "ecmaVersion": 2020,
        "sourceType": "module"
      },
      "plugins": ["@nrwl/nx", "@nrwl/eslint-plugin-nx"],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "mar",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "mar",
            "style": "kebab-case"
          }
        ],
        "no-restricted-imports": [
          "error",
          {
            "paths": [
              {
                "name": "rxjs/Rx",
                "message": "Please import directly from 'rxjs' instead"
              }
            ]
          }
        ],
        "max-classes-per-file": "off",
        "@typescript-eslint/explicit-member-accessibility": "error",
        "@typescript-eslint/member-ordering": [
          "error",
          {
            "default": ["static-field", "instance-field", "static-method", "instance-method"]
          }
        ],
        "no-multiple-empty-lines": 2,
        "no-restricted-syntax": [
          "error",
          {
            "selector": "CallExpression[callee.object.name=\"console\"][callee.property.name=/^(log|debug|info|time|timeEnd|trace)$/]",
            "message": "Unexpected property on console object was called"
          }
        ],
        "@typescript-eslint/no-explicit-any": "error",
        "@typescript-eslint/explicit-module-boundary-types": "error",
        "no-empty": "error",
        "@typescript-eslint/no-inferrable-types": [
          "error",
          {
            "ignoreParameters": true
          }
        ],
        "eqeqeq": ["error", "smart"]
      }
    },
    {
      "files": ["*.component.html", "./apps/marmind-web/src/index.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

[rafaelss95]

Please, in a next time, format JSON using the code snippet here + using a tool like https://jsonformatter.curiousconcept.com, so it become readable 😄

---

So, I've copied your configs to a test application and still can't reproduce, no reports at all...

The best you can do now is to create a minimal reproduction of the problem in a repository, so I can take a look at this.

[jlabaj]

@rafaelss95 yes sorry, didn't hit the format code in comment, corrected now. Ok hm I probably wont have time to do a minimum repro. I will try some more things. Maybe I will get back to this later with a minimum repo.

[jlabaj]

@rafaelss95
as per: https://github.com/angular-eslint/angular-eslint
We strongly recommend that you do not try and hand-craft setups with angular-eslint and Nx. It is easy to get things wrong.

I should use only nx plugins:
https://nx.dev/latest/angular/guides/eslint

this is exactly my case

[rafaelss95]

@jlabaj in that case, can we close this and the other issue?

[GeorgeKnap]

Just encountered this eslint error too in my project, please don't close it.

shared lib eslint:

  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "sds",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "sds",
            "style": "kebab-case"
          }
        ],
        "@typescript-eslint/no-non-null-assertion": "off"
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@nrwl/nx/angular-template"],
      "rules": {}
    }
  ]
}

root eslint:

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "scope:shared",
                "onlyDependOnLibsWithTags": ["scope:api"]
              },
              {
                "sourceTag": "scope:breadcrumbs",
                "onlyDependOnLibsWithTags": ["scope:shared"]
              },
              {
                "sourceTag": "scope:api",
                "onlyDependOnLibsWithTags": []
              },
              {
                "sourceTag": "scope:plants",
                "onlyDependOnLibsWithTags": ["scope:shared", "scope:api", "scope:component", "scope:widget"]
              },
              {
                "sourceTag": "scope:component",
                "onlyDependOnLibsWithTags": ["scope:shared"]
              },
              {
                "sourceTag": "scope:widget",
                "onlyDependOnLibsWithTags": ["scope:shared", "scope:component", "scope:api"]
              },
              {
                "sourceTag": "type:lib",
                "onlyDependOnLibsWithTags": ["scope:shared", "scope:component", "scope:api"]
              },
              {
                "sourceTag": "scope:enerest4",
                "onlyDependOnLibsWithTags": ["type:lib"]
              },
              {
                "sourceTag": "type:app",
                "onlyDependOnLibsWithTags": ["type:lib"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {
        "max-len": 0,
        "curly": 2,
        "@typescript-eslint/no-non-null-assertion": "off"
      }
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

[rafaelss95]

It's weird because, as I said some comments above, we have similar test cases that are passing on the latest version (which is even documented in the auto-generated docs based on current tests) + I tested it on a new project and I couldn't reproduce it...

@GeorgeKnap btw, which versions of @angular-eslint/* packages do you have?

Note that as I also said above, if someone could provide a minimum repro I can take a look.

[GeorgeKnap]

@rafaelss95

migrating NX to latest version did not help. It actually did not update the angular eslint lib... still 12.3.1

[gmiklich]

I know you're looking for a minimal repro, but figured I'd chime in to say that I'm experiencing the same thing and am using angular eslint 12.5.0. The auto-fix is also funny in that it will add about 10 more PipeTransform's to the list of interfaces it inherits from.

[rafaelss95]

I know you're looking for a minimal repro

Yes, could you help me to help you? 🥇

I would be more than happy to check out any possible issues, but first I need to understand / see what issue you are facing. I already tried to reproduce it on master here and in a brand new project, but I didn't have luck, so I have my hands tied here.