Esslint configuration for Nx/Angular project (no-host-metadata-property)

Question

I would like to turn the rule @angular-eslint/no-host-metadata-property into a warning instead of an error but I can't figure out how to configure it.

This is what the error message looks like:

Use @HostBinding or @HostListener rather than the host metadata property (https://angular.io/styleguide#style-06-03) @angular-eslint/no-host-metadata-property

This is what I have tried in the eslintrc.json file at the root level:

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
     {
      "files": ["*.ts"],
      "rules": {
       ....
       "@angular-eslint/no-host-metadata-property": "warn",
      }
     "plugins": ["@angular-eslint/eslint-plugin", "eslint-plugin-import", "@typescript-eslint"]
    }
}

This is for an Angular 12 project. I ran the nx migration command to convert linting rules from tslint to eslint. How can I override that rule?

Answer 1

Making changes on the root level is futile as your project's .eslintrc.json will overrides those changes due to @nrwl/nx/angular being set in the overrides section.

You will unfortunately have to set this is every project in the overrides section.

If you have multiple projects and/or multiple changes that need to be applied, you can extract it into eslint-custom-overrides.json file and use it as the last in the extends section:

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@nrwl/nx/angular",
        "plugin:@angular-eslint/template/process-inline-templates"
        "../../eslintrc-custom-overrides.json"
      ],
   },
   ...
  ],
  ...
}

Your eslintrc-custom-overrides.json would look like this:

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
         "@angular-eslint/no-host-metadata-property": "warn"
      }
    }
  ]
}

Check for more details on the NX Issue.