'ESLint complaining about empty constructor and ngOnInit-implementation

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.

Solution 1:^[1]

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

Solution 2:^[2]

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.

Solution 3:^[3]

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": {}
        }
    ]
}

Solution 4:^[4]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jason Glez
Solution 2	William Hou
Solution 3	Bercove
Solution 4	Vahid

'ESLint complaining about empty constructor and ngOnInit-implementation

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]