Conquering TSLint Warnings: How to Change the Default Component Prefix in Angular

• By default, Angular components use the prefix app- in their selectors (e.g., <app-my-component>).
• TSLint, a static code analysis tool, often enforces a specific prefix convention (like app-) to promote consistency and maintainability in your codebase.
• If you want to use a different prefix (e.g., my-component or a prefix based on your feature module), you'll need to adjust your Angular project's configuration and TSLint rules.

Steps to Change the Default Prefix:

1. Modify angular.json:

   • Open your project's angular.json file.
   • Locate the projects section and find the configuration for your application (usually named [your-app-name]).
   • Inside the application configuration, look for the prefix property under the architect > build > options section.
   • Change the value of prefix to your desired prefix (e.g., "prefix": "my").

2. Update TSLint Rules (tslint.json):

   • Open your project's tslint.json file (if it doesn't exist, create one).
   • Locate or add the following rules under the rules section:

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

   • Replace "your-prefix" with the prefix you chose in step 1 (e.g., "my").

Explanation:

• The tslint.json changes update the TSLint rules to accept your chosen prefix for both components and directives.

  • "component-selector" and "directive-selector" rules enforce the prefix usage for components and directives, respectively.
  • "true" enables the rule.
  • "element" or "attribute" specifies whether the selector is used as an element tag or an attribute.
  • ["your-prefix"] is an array listing the allowed prefixes.
  • "kebab-case" or "camelCase" enforces the case convention for the component/directive name in the selector.

After these adjustments:

• When you create new components using the Angular CLI, they'll have the new prefix (e.g., <my-my-component>).
• Existing components with the app- prefix will continue to work as expected.
• TSLint warnings regarding the prefix will no longer appear.

{
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "[your-app-name]": {
      "projectType": "application",
      "root": "src",
      "sourceRoot": "src",
      "prefix": "my", // Changed prefix to "my"
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/[output-hash]",
            "sourceMap": true,
            "extractCss": true,
            "tsConfig": "src/tsconfig.app.json",
            // ... other build options
          }
        },
        // ... other architect options
      }
    },
    // ... other projects
  }
}

Updated tslint.json:

{
  "rules": {
    "component-selector": [true, "element", ["my"], "kebab-case"], // Updated prefix to "my"
    "directive-selector": [true, "attribute", ["my"], "camelCase"], // Updated prefix to "my"
    // ... other TSLint rules
  }
}

Explanation of Changes:

• In angular.json, the prefix property is set to "my" under the architect > build > options section of your application configuration. This ensures newly generated components have the my- prefix.
• In tslint.json, the component-selector and directive-selector rules are adjusted to allow the "my" prefix for both components and directives. The ["my"] array specifies the accepted prefixes.

Remember to replace [your-app-name] with the actual name of your Angular application in both files.

• If you only need to override the prefix for a few specific components, you can use the tslint:disable comment directly within the component's TypeScript file:

// my-component.component.ts
@Component({
  selector: 'my-special-component', // Using a non-standard prefix
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MySpecialComponent {
  // ...
}

// Suppress TSLint warning for this specific component
// tslint:disable-next-line:component-selector

This approach should be used sparingly, as it disables TSLint for that specific line. It's better for consistency to adjust the global prefix or use a linter configuration override file.

Linter Configuration Override File:

• Some linter tools, including ESLint (which can be integrated with Angular), allow configuration overrides in separate files. This can be useful if you have different prefix requirements for different parts of your application.
• The specific steps for creating and using an override file will depend on the linter you're using. Consult your linter's documentation for details.

Third-Party Schematics (Less Common):

• If you're comfortable with advanced Angular customization, you might explore third-party schematics that can modify component generation behavior, potentially including prefix changes. However, this is a less common approach and requires additional setup.

Choosing the Right Method:

• For a global prefix change across your entire application, modifying angular.json and tslint.json is the recommended approach.
• If you only need to override the prefix for a few isolated components, consider using the tslint:disable comment, but use it judiciously.
• Explore linter configuration overrides or third-party schematics only if you have specific requirements that can't be met with the other methods.