如何禁用 Angular 样式指南的 tslint 规则：“选择器应以<prefix> “？</prefix>

Question

I have an Angular test for some component which uses the directive ngb-pagination from ng-bootstrap .

Now, in my test I mock this component as follow:

// on next line I get: The selector should be prefixed by "<prefix>" (https://angular.io/guide/styleguide#style-02-07) (component-selector)
@Component({ template: ``, selector: 'ngb-pagination' })
class DummyNgPagination {
    // some data here, not relevant in to the question
}

In the line where it is placed the @Component annotation I get a tslint error pointing to Style 02-07 .

I tried to disable the rule by doing the following, but the result is the same.

// tslint:disable-next-line:directive-selector
@Component({ template: ``, selector: 'ngb-pagination' })

How can I disable that rule for that specific line?

PS:

• Here is the real angular project in case you want to check any resource configuration.
• There is a similar question ( kebab-case in angular 2 selectors (tslint) ) but the OP just decided to live with it.

Answer 1

The rule directive-selector works for the @Directive decorator.

For a @Component you need to use component-selector

For example:

// tslint:disable-next-line:component-selector
@Component({ template: ``, selector: 'ngb-pagination' })

Answer 2

You can set that inside your angular.json file inside scematics entry like so:

You can set it for both Components and directives

"schematics": {
    "@schematics/angular:component": {
      "prefix": ""
    },
    "@schematics/angular:directive": {
      "prefix": ""
    }
}

And if you are using the command line and you don't generate components/directives frequently, you can do that using the command line like so:

ng generate component my-component --prefix ""

Answer 3

Remove prefix rule from.eslintrc.json