`parserOptions.project` not working for Angular in an Angular-NestJS monorepo

affanmustafa commented 1 year ago

Current Behavior

In case of type-checking, as per the NX documents (https://nx.dev/recipes/other/eslint) you must add parserOptions.project in the corresponding overrides block. That seems to work for NestJS in my monorepo but not for Angular. I have the basic eslintrc.json for root, api and eslint. I am only adding this at the top of the root eslintrc.json:

  "extends": ["airbnb-typescript/base"],

After that, my root eslintrc.json looks like this:

{
  "extends": ["airbnb-typescript/base"], //newly added
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

And my api eslintrc.json looks like this:

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "parserOptions": {
        "project": ["apps/api/tsconfig.*?.json"]
      },
      "rules": {}
    },
    {
      "files": ["*.ts", "*.tsx"],
      "parserOptions": {
        "project": ["apps/api/tsconfig.*?.json"]
      },
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "rules": {}
    }
  ]
}

And finally, the eslint eslintrc.json looks like this:

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["/apps/eslint/tsconfig.*?.json"]
      },
      "extends": [
        "plugin:@nrwl/nx/angular",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "eslint",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "eslint",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@nrwl/nx/angular-template"],
      "rules": {}
    }
  ]
}

As per this, nx lint api works fine however, nx lint eslint gives the error

Error: You have attempted to use a lint rule which requires the full TypeScript type-checker to be available, but you do not have `parserOptions.project` configured to point at your project tsconfig.json files in the relevant TypeScript file "overrides" block of your project ESLint config `apps/eslint/.eslintrc.json`

which is not fixed even after adding parserOptions.project.

Expected Behavior

After adding parserOptions.project linting should work fine.

Github Repo

https://github.com/affanmustafa/nx-eslint

Steps to Reproduce

Run npm install in repo.
Run nx lint api
Run nx lint eslint
Notice that both eslintrc.json have parserOptions.project configured.

Nx Report

Linting "eslint"...

Error: You have attempted to use a lint rule which requires the full TypeScript type-checker to be available, but you do not have `parserOptions.project` configured to point at your project tsconfig.json files in the relevant TypeScript file "overrides" block of your project ESLint config `apps/eslint/.eslintrc.json`

Please see https://nx.dev/guides/eslint for full guidance on how to resolve this issue.

Failure Logs

No response

Additional Information

No response

FahriDevZ commented 1 year ago

move extends from root to overrides, and remove slash in parserOptions.project in apps/eslint

ex: https://github.com/FahriDevZ/nx-eslint/commit/f8af4038a3cd0715afe690eb6c179c9b89516216

meeroslav commented 1 year ago

I am closing this as answered by @FahriDevZ.

`.eslintrc.json`

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      //...
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": [
        "airbnb-typescript/base", // moved from top
        "plugin:@nrwl/nx/typescript"
      ],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      //...
    }
  ]
}

`apps/eslint/.eslintrc.json`

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["apps/eslint/tsconfig.*?.json"] // drop leading slash here
      },
      //...
    },
    {
      "files": ["*.html"],
      //...
    }
  ]
}

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx