Angular @Component Naming

ID

javascript.angular_naming_component

Severity

info

Remediation Complexity

trivial

Remediation Risk

medium

Remediation Effort

low

Resource

Naming Convention

Language

JavaScript

Tags

angular, framework, naming

Description

Reports an Angular @Component class whose name does not end in Component, or whose selector is not a kebab-case element selector:

// Bad — class missing Component suffix.
@Component({ selector: "app-foo", template: "" })
export class AppFoo { }                          // FLAW

// Bad — selector is not kebab-case.
@Component({ selector: "AppFoo", template: "" })
export class AppFooComponent { }                 // FLAW

// Bad — selector has no hyphen (custom-element rule).
@Component({ selector: "foo", template: "" })
export class FooComponent { }                    // FLAW

// Good
@Component({ selector: "app-foo", template: "" })
export class AppFooComponent { }

Rationale

Two consistency rules make Angular components self-documenting:

  • The class suffix Component lets readers identify components in TypeScript imports without having to look at decorators.

  • The selector follows the HTML custom-element rule (lowercase, must contain a hyphen) and the Angular style guide preference for a project prefix (app-foo, lib-bar). This avoids name collisions with built-in HTML elements and across libraries.

Remediation

@Component({ selector: "app-foo", template: "" })
export class AppFooComponent { ... }

Notes

The selector check requires the value to be a literal string. Selectors composed at runtime, multi-target selectors (comma-separated lists), and attribute / class selectors are out of scope for v1.

References