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

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

Leave a Comment