CODEWITHSUNDEEP
angularconstructoreslint
Konrad Viltersten
Konrad Viltersten

Reputation: 39138

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.

Upvotes: 24

Views: 50453

Answers (6)

Chris Barr
Chris Barr

Reputation: 34022

This is because constructor(service: AuxService) { } has service as just a local parameter, and nothing inside of the constructor uses it. The linter is correct.

Instead if you have constructor(private readonly service: AuxService) { } then you have access to this.service in the other methods in your class and your constructor will not be marked as unused.

Upvotes: 1

Bercove
Bercove

Reputation: 1175

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

Upvotes: 7

William Hou
William Hou

Reputation: 1771

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

Upvotes: 10

Jason Glez
Jason Glez

Reputation: 1512

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

enter image description here

Upvotes: 22

Vahid
Vahid

Reputation: 7551

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.

Upvotes: 2

Nirmalya Roy
Nirmalya Roy

Reputation: 713

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.
    }

Upvotes: 12

Related Questions