Post
Ask Question

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.

  1. Change prefix for components in an old project
  2. 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,
  1. {  
  2.     "extends": "../tslint.json",  
  3.     "rules": {  
  4.         "directive-selector": [  
  5.             true, "attribute", "app", "camelCase"  
  6.         ],  
  7.         "component-selector": [  
  8.             true, "element", "app", "kebab-case"  
  9.         ]  
  10.     }  
  11. }  
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.
  1. {  
  2.     "extends": "../tslint.json",  
  3.     "rules": {  
  4.         "directive-selector": [  
  5.             true, "attribute", "app", "camelCase"  
  6.         ],  
  7.         "component-selector": [  
  8.             true, "element",  
  9.             // you can write your prefix name for component - i have written 'standard' as prefix name for component   
  10.             "standard", "kebab-case"  
  11.         ]  
  12.     }  
  13. }   
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.
  1. import { Component, OnInit } from '@angular/core';  
  2. @Component({  
  3.    selector: 'standard-about',  
  4.    templateUrl: './about.component.html',  
  5.    styleUrls: ['./about.component.css']  
  6. })  
  7. export class AboutComponent implements OnInit {  
  8.    constructor() { }  
  9.    ngOnInit() {  
  10.    }  
  11. }  

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. :)


Similar Articles