angular2 how to change the default prefix of component to stop tslint warnings
AngularAngular Problem Overview
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"
Angular Solutions
Solution 1 - Angular
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
Solution 2 - Angular
-
Adjust your
angular-cli.json
: "prefix": "defaultPrefix" so that angular-cli will use that for generating components. -
Ajust
tslint.json
like this:"directive-selector": [ true, "attribute", ["prefix1", "prefix2", "prefix3"], "camelCase" ], "component-selector": [ true, "element", ["prefix1", "prefix2", "prefix3"], "kebab-case" ],
Solution 3 - Angular
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.
Solution 4 - Angular
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"
Solution 5 - Angular
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
Solution 6 - Angular
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.
Solution 7 - Angular
For angular 13:
If you used ng lint
to preinitialize the linting process:
You have a pregenerated .eslintrc.json
file.
In this file, the prefix is mentionned, simply change it as an array and it will work.
Here we add "mynewprefix" as a valid prefix for the lint:
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": ["app", "mynewprefix"],
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": ["app", "mynewprefix"],
"style": "kebab-case"
}
]
}