Changing Prefix Of Angular Component

In my first blog, Setting up your first project in angular 7 using Angular-CLI, we discussed how to create an Angular project using Angular CLI. Now, let's discuss how to change the prefix of an Angular component.

Suppose, you create an Angular application. After some time, you realize that you need to change your prefix name as per the client requirement. Don't worry! You don't have to create a new application for this. Angular provides a solution to change the prefix name.

Let's take an example. You created a component called 'home' component using Angular CLI command. By default, the home component selector is like <app-home> and you want to change this to your prefix name like <myprefix-home>.

To implement the above scenario, we have two options.

Change prefix for components in an old project
Change prefix for components in a new project using the command line.

Change prefix for components in an old project

Suppose, you have an old project and you want to change the prefix for the component, then you need to follow the below two steps,

STEP 1 - Change component-selector in tslint.json

Go to the tslint.json file. The path for tslint.json is D:\your-foldername\your project name\src\tslint.json,

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

As you can see 'app' under the 'component-selector' in above code snipped, go and change the app and write your prefix name for your component.

{
"extends": "../tslint.json",
"rules": {
"directive-selector": [
true, "attribute", "app", "camelCase"
],
"component-selector": [
true, "element",
// you can write your prefix name for component - i have written 'standard' as prefix name for component
"standard", "kebab-case"
]
}
}

As you can see, I have changed 'app' to 'standard'. Whenever you create a component using Angular CLI, you will get the 'standard' prefix in the component.

STEP 2 - Change prefix in angular.json (if you are using angular 2/4/5 then you can find angular-cli.json file)

Go to angular.json where you will see the prefix as app by default. See in the below snapshot.

Change 'app' prefix to your prefix. In the snapshot, you can see the prefix as 'standard'.

NOTE
You need to change your angular.json and tslint.json file. This will work correctly. Just go and create an about component using Angular CLI.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'standard-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

Change prefix for components in the new project

If you are going to create a new application, then use the below Angular-CLI command.

ng new project-name --prefix myprefix(anything)

These are two ways to change the prefix of the component.

I hope this article is helpful to you. Thanks for reading!

Happy learning. :)

7 Comments

Join the conversation! Your thoughts help the community grow.

Satish6y ago
Or set a dynamic component prefix so that whenever want to change it will replace all the component's prefix.
Satish6y ago
How to change the previous component prefix in one go.
- Mohd Kashif6y ago
  You can use first approach as mentioned in articles.
Mahesh Verma7y ago
Well done....very informative blog.
- Mohd Kashif7y ago
  Thanks Mahesh :)
Cris Gomez7y ago
Well done, nice tutorial... thx
- Mohd Kashif7y ago
  Thanks cris gomez:)