I initially started a few months ago a project in Angular using Visual Studio Code editor.
Today I made the switch to WebStorm and I also upgraded my project to Angular 4.0.
While my project is running nice without any errors, I receive the following error in WebStorm:
TSLint: The selector of the component "ConnectionStatusComponent" should have prefix "app" ( https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-07 ) (component-selector)
Following that link I realized that is a good practice to add a custom prefix to component selector to prevent name collisions with components in other apps and with native HTML elements
I understand that. My question is why am I forced to use the app
prefix and not other prefix? If I put other prefix then app
, WebStorm will mark the line as error.
According to the style guide from that link:
Do use a custom prefix for a component selector. For example, the prefix toh represents from Tour of Heroes and the prefix admin represents an admin feature area.
I can use whatever prefix I want. Is there a rule on the prefix name?
As far as I know, there are no strict rules on prefix name. If you are using the CLI, you can edit the prefix
node under apps
in the angular-cli.json
. This will make the cli create new components with whatever prefix you decide. For tslint.json
you can set both component and directive rules:
"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],
Hope this helps.
EDIT
If you want to use more than one prefix, you can specify them in an array like this( example from here ):
//RULES: [ENABLED, "attribute" | "element", "selectorPrefix" | ["listOfPrefixes"], "camelCase" | "kebab-case"]
"directive-selector": [true, "attribute", ["dir-prefix1", "dir-prefix2"], "camelCase"],
"component-selector": [true, "element", ["cmp-prefix1", "cmp-prefix2"], "kebab-case"],
attribute
or element
. kebab-case
or camelCase
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.