避免出现错误“组件的选择器应命名为kebab-case并包含破折号”

Question

How could I avoid error 'The selector of the component should be named kebab-case and include dash ' in Angular2, if I don't want to rename the selector? Is there any workaround?..

Answer 1

Try

import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";

@NgModule({
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

Answer 2

This error is being generated by TSLint, using the codelyzer plugin. This enforces the Angular styleguide recommendations for selectors: https://angular.io/guide/styleguide#component-selectors

As with most linting errors, there are ways to configure or ignore them. Be sure to be deliberate about how and when you ignore linting errors. Depending on your situation, you may want to handle this error differently:

• If all your components have this error, and have matching selectors, you can change the rules TSLint uses to check for errors in the TSLint.json file:

   { "rules": { // The rules component-selector and directive-selector have the following arguments: // [ENABLED, "attribute" | "element", "prefix" | ["listOfPrefixes"], "camelCase" | "kebab-case"] "component-selector": [true, "element", ["cmp-prefix1", "cmp-prefix2"], "kebab-case"], "directive-selector": [true, "attribute", ["dir-prefix1", "dir-prefix2"], "camelCase"], ... } } 

  see https://github.com/mgechev/codelyzer#recommended-configuration

  You can also configure the CLI to generate components and directives with the correct prefix at the bottom of your angular.json file:

   { "schematics": { "@schematics/angular:component": { "inlineStyle": false, "inlineTemplate": false, "prefix": "myCustomPrefix", "styleext": "scss" }, "@schematics/angular:directive": { "prefix": "myCustomPrefix" } } 

• If you have a one-off component or directive you would like to exclude TSLint from checking, you can use the suppression comment:

   // tslint:disable-next-line:component-selector 

• If you would like to disable this checking completely, you can do so in tslint.json :

   { "rules": { "directive-selector": false, "component-selector": false, ... } }