Custom Prefix for Angular and WebStorm Components

Question

First, I started a project a few months ago in Angular using the Visual Studio Code Editor.

Today I switched to WebStorm and I also upgraded my project to Angular 4.0.

While my project is working without errors, I get the following error in WebStorm:

TSLint: The selector of the component "ConnectionStatusComponent" must have the prefix "app" ( https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-07 ) (selector component)

Following this link, I realized that it’s good practice to add a custom prefix to the component selector to prevent name collisions with components in other apps and with native HTML elements

I understand it. My question is: why am I forced to use a prefix appand not another prefix? If I add another prefix, then appWebStorm marks the line as an error.

According to the style guide from this link:

Use a special prefix for the component selector. For example, the prefix toh represents from Tour of Heroes and the prefix admin represents the scope of the administrator.

I can use any prefix I want. Is there a rule for a prefix name?

Answer 1

, . CLI, prefix node apps angular-cli.json. cli , . tslint.json , :

"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],

, .

, ( ):

//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 element.
• - .
• - kebab-case, camelCase.