angular2 how to change the default prefix of component to stop tslint warnings

Question

It seems, when I create an Angular 2 app using Angular cli. My default component prefix is app-root for AppComponent. Now, when I change the selector to something else say "abc-root"

@Component({
  selector: 'abc-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

vscode warns me,

[tslint] The selector of the component "AppComponent" should have prefix "app"

Answer 1

You need to modify two files tslint.json and .angular-cli.json, suppose you want to change to myprefix :

In the tslint.json file just modify the following 2 attributes:

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

change "app" to "myprefix"

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

In the angular.json file just modify the attribute prefix: (For angular version less than 6, the file name is .angular-cli.json)

"app": [
  ...
  "prefix": "app",
  ...

change "app" to "myprefix"

"app": [
  ...
  "prefix": "myprefix",
  ...

If in the case you need more than one prefix as @Salil Junior point out:

"component-selector": [true, "element", ["myprefix1", "myprefix2"], "kebab-case"],

If creating a new project using Angular cli use this command line option

ng new project-name --prefix myprefix

Answer 2

1. Adjust your angular-cli.json : "prefix": "defaultPrefix" so that angular-cli will use that for generating components.

2. Ajust tslint.json like this:

    "directive-selector": [ true, "attribute", ["prefix1", "prefix2", "prefix3"], "camelCase" ], "component-selector": [ true, "element", ["prefix1", "prefix2", "prefix3"], "kebab-case" ], 

Answer 3

Actually, with Angular Cli, you can just change the "prefix" tag, inside the "apps" array on your angular-cli.json , located on the root app.

Changing for "TheBestPrefix", like this.

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.json",
    "prefix": "TheBestPrefix",
    "mobile": false,
    "styles": [
      "styles.css"
    ],
    "scripts": [],
    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
]

When you generate a new component using CLI, ng g component mycomponent the component tag will have the following name "TheBestPrefix-mycomponent"

Answer 4

For angular 6/7 onwards there will be a tslint.json inside your /src folder which holds the tslist rules for your component and directives.

{
    "extends": "../tslint.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "directivePrefix",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            "compoenent-prefix",
            "kebab-case"
        ]
    }
}

Changing in that file will fix the problem.

Answer 5

For latest versions of Angular CLI file angular-cli.json was renamed to angular.json. Everything else is the same.

Answer 6

tslint.json

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

this 'kebab-case' force any component selector to be with this '-' case.

for example you can have selector like ' app-test ', ' app-my ' like this.

And as far as your error concern you must start component selector with 'app' as I have just mentioned in example.

I don't think you should make any change in tslint.json , although it would resolve your issue, but its not good practice to change in tslint.

Thanks

Answer 7

Thanks to @Aniruddha pointing out the changes in angular 7:

create tslint.json in src/app/shared to extend the app/tslint.json :

{
  "extends": "../../tslint.json",
  "rules": {
    "directive-selector": [
      true,
      "attribute",
      "shared",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "shared",
      "kebab-case"
    ]
  }
}

One thing - If in app.component.spec you mock a component from shared module, it will complain that your mocks selector starts with 'shared' instead of starting with 'app'. I suppose that makes sense - i should be creating my mocks in the module from whence they came.