Custom prefix for components Angular and WebStorm

Question

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?

Answer 1

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"],

• In the array, the first argument is a boolean for whether it is enabled or not.
• The second argument is a union type with choices attribute or element.
• The third argument is either a string for a single prefix or an array for a list of prefixes.
• And the fourth argument is a union type of either kebab-case or camelCase.