eslint-plugin-angular icon indicating copy to clipboard operation
eslint-plugin-angular copied to clipboard

Rules `no-services` and `di-order` don't work in AngularJS components

Open jbanulso opened this issue 6 years ago • 3 comments

I use it to detect $http and $resource injections like this:

"angular/no-services": [2, ["http", "resource"]]

However, it doesn't detect those injections in my components. I've even tried to configure the rule like this, with no luck either way:

"angular/no-services": [2, ["http", "resource"], ["component"]]

// or

"angular/no-services": [2, {"component": ["http", "resource"]}]

EDIT: The rule di-order does not work either. This could potentially mean that other rules related to controllers might not work inside components.

jbanulso avatar Sep 21 '18 08:09 jbanulso

@jbanulso, component definitions (i.e. the object passed along to .component(...)) shouldn't be injectable, thus this lint shouldn't concern them.

If a component need any dependencies, they should have them injected into the controller property of the component.

How exactly are you defining your components?

miqh avatar Oct 07 '18 02:10 miqh

@miqh I define my components like this (sometimes without the direct injection, either way doesn't work for me):

var DummyComponent = {
    controller: DummyController,
    templateUrl: 'dummy.component.html'
};

function DummyController($http) { }

DummyController.$inject = ['$http'];

angular
  .module('DummyModule')
  .component('dummy', DummyComponent);

jbanulso avatar Oct 08 '18 09:10 jbanulso

Actually, I've just noticed that the same problem occurs with the di-order rule (and maybe with others?), so I'll update the title of the issue.

jbanulso avatar Oct 10 '18 09:10 jbanulso