Angular component name constraints - 'the selector [your component name] is not permissible'

Question

Angular component name constraints - 'the selector [your component name] is not permissible'

When trying to generate a component using the Angular 6 CLI (version 6.0.7), I encountered an issue. After typing in ng g c t1-2-3-user, I received an error message stating that the selector (app-t1-2-3-user) is invalid.

I wondered if there was something inherent about this name that was not allowed by Angular. Interestingly, I had previously created a parent module named t1-myModule using ng g module t1-myModule without any issues. The problem seems to be specific to naming a component as t1-2-3-user within that module.

To test this hypothesis, I tried creating a different component with the command ng g c t1-testComponent and it worked perfectly. So, it appears that the CLI is functioning properly, but there may be some restriction on naming conventions for components like t1-2-3-user in Angular.

EDIT: Upon further investigation, I discovered that Angular dislikes having a number as the first character after a dash (-) in a component name. This limitation might be similar to restrictions found in JavaScript variables, considering that Angular eventually compiles into JavaScript. Can anyone provide more insight or confirm this constraint on component naming?

angular typescript visual-studio-code angular-cli angular6

Answer 1

Answer №1

According to the regulations set by W3C standards, selectors must meet the following criteria:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain

only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);

they cannot start with a digit, two hyphens, or a hyphen followed by a digit

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Angular adheres to this W3C convention for selector names. A similar validation process is performed within the Angular CLI codebase. The actual implementation involves using a regular expression (

/^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/

) to ensure that the specified selector meets the required criteria before creating files.

When executing the

ng generate component component-name

command, Angular calls upon @angular/schematics for the component command and supplies the component name as a parameter. This triggers a validation check on the selector, as demonstrated in the following line of code: below line.

validateHtmlSelector(options.selector);

For further details, refer to validation.ts

export const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
export function validateHtmlSelector(selector: string): void {
  if (selector && !htmlSelectorRe.test(selector)) {
    throw new SchematicsException(tags.oneLine`Selector (${selector})
        is invalid.`);
  }
}

Answer 2

According to the regulations set by W3C standards, selectors must meet the following criteria:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain

only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);

they cannot start with a digit, two hyphens, or a hyphen followed by a digit

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Angular adheres to this W3C convention for selector names. A similar validation process is performed within the Angular CLI codebase. The actual implementation involves using a regular expression (

/^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/

) to ensure that the specified selector meets the required criteria before creating files.

When executing the

ng generate component component-name

command, Angular calls upon @angular/schematics for the component command and supplies the component name as a parameter. This triggers a validation check on the selector, as demonstrated in the following line of code: below line.

validateHtmlSelector(options.selector);

For further details, refer to validation.ts

export const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
export function validateHtmlSelector(selector: string): void {
  if (selector && !htmlSelectorRe.test(selector)) {
    throw new SchematicsException(tags.oneLine`Selector (${selector})
        is invalid.`);
  }
}

Angular component name constraints - 'the selector [your component name] is not permissible'

Answer №1

Similar questions

Displaying a div component in React and Typescript upon clicking an element

What steps should we take to ensure that the container beside the fixed left navigation bar is responsive?

Making an Angular POST request and then navigating to a new component

Angular library generation causing circular dependencies

Implementing Azure AD authentication with Angular and .NET Core 2 Web API

@ngrx effects ensure switchmap does not stop on error

What is the best way to store a small number of files in the state

How to efficiently retrieve automatically generated elements by ID in Angular 2

When accessing a method exposed in Angular2 from an external application, the binding changes are lost

Issue C2039: 'IsNearDeath' cannot be found within 'Nan::Persistent<v8::Object,v8 ::NonCopyablePersistentTraits<T>>'

Adjust the size of the mat-expansion indicator to your desired height and width

Building an advanced numerical input validation system with Angular 7

Resolving Node.js Absolute Module Paths with TypeScript

When using the RxJs Pipe with MAP in Angular and Ionic, it may not return a value in windows, but it works perfectly in Mac when used with HttpClient

Enhancing MUI themes by incorporating module augmentation for multiple typings

Customize the MUISelect style within a universal theme

Using TypeScript TSX with type parameters

Changing the Value of an Input Element Dynamically in React: A Step-by-Step Guide

Using mat-select along with formControl to establish the default value

Retrieve an enumeration from a value within an enumeration