ESLint complaining about empty constructor and ngOnInit-implementation

user_1525840 0
Viewed 21633

In my Angular application, the rule no-empty-function, triggered an error for my constructor. Well, it is indeed an empty body there but the constructor itself needs to be there, because I inject a service.

export class ClientListComponent implements OnInit {
  constructor(service: AuxService) { }
  ngOnInit() { }
  ...
}

Interestingly, it also complains about the implemented method for the interface. However, the error messages vary between those two, which perplexes me additionally.

Unexpected empty constructor.
Unexpected empty method 'ngOnInit'.

So, it clearly distinguishes between a plain method (be that still required one due to the implemented interface, which itself is wrong in my opinion to nag about) and a constructor. I'm sure that the creators have heard about dependency injection, so I can't understand what I'm missing.

angular eslint constructor
5 Answers

You also could modify your ".eslintrc.json" file to exclude the rule from the linter.

enter image description here

user_60227400

There is actually a combination of rules, not only one:

      "no-empty-function": "off",
      "@typescript-eslint/no-empty-function": "off",
      "@angular-eslint/no-empty-lifecycle-method": "off"

I got rid of all the empty-function errors only after I added the above-given three rules to the .eslintrc.json file.

Copy the three rules, paste them in your .eslintrc.json file (inside the "rules"), and you will get rid of the errors.

enter image description here

user_76805110

You need to edit .eslintrc.json file, and add this line

"@angular-eslint/no-empty-lifecycle-method": "off"

Or check out this file

{
    "root": true,
    "ignorePatterns": ["projects/**/*"],
    "overrides": [
        {
            "files": ["*.ts"],
            "parserOptions": {
                "project": ["tsconfig.json"],
                "createDefaultProgram": true
            },
            "extends": [
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates"
            ],
            "rules": {
                "@angular-eslint/directive-selector": [
                    "error",
                    {
                        "type": "attribute",
                        "prefix": "app",
                        "style": "camelCase"
                    }
                ],
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        "type": "element",
                        "prefix": "app",
                        "style": "kebab-case"
                    }
                ],
                "@angular-eslint/no-empty-lifecycle-method": "off"
            }
        },
        {
            "files": ["*.html"],
            "extends": ["plugin:@angular-eslint/template/recommended"],
            "rules": {}
        }
    ]
}
user_73293340

For constructors you can use this settings: { "allow": ["functions"] }. But for ngOnInit at this time, there's no solution other than removing the method and implements OnInit.

user_18896070

I think you need to check below link https://eslint.org/docs/rules/no-empty-function

Based on the documentation, below are incorrect

    constructor() {}

    foo() {}

and these are correct

    constructor() {
        // do nothing.
    }

    foo() {
        // do nothing.
    }
user_25274270
Related