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

Angular - CSS Grid - Positioning columns based on their index values

Troubleshooting: Inability to Use Type Assertions while Retrieving Data from

Encountering a GitHub REST API CORS issue while attempting to fetch a public repository's git archive

What is the best method to terminate an Electron application using TypeScript?

Issue in Angular2: Unable to load the templateUrl file for a component

Change the default icon in mat-stepper angular material

Managing the token prior to the page loading: best practices

Error with Angular 2 observables in TypeScript

Injecting Dependencies with Angular 2 and the Ability to Include Optional Parameters

When an additional data stream is introduced, Resolver is unable to effectively resolve the issue

Is there a way to utilize an Angular Material checkbox without any extra gaps or spacing?

Is there a way to combine compiling TypeScript and running the resulting .js file into one build command in Sublime Text 3?

Navigate to the logout page upon encountering an error during the request

Encountered an issue when attempting to send data using this.http.post in Angular from the client's perspective

Icon appearing outside the button instead of inside

Broadcast the latest N occurrences

Angular 8 - Unraveling the Mystery Behind its Initial Page Discovery

What is the reason behind TypeScript requiring me to initialize a property even though I am retrieving its value from a local reference?

A guide to extracting attribute values from HTML using Angular 4

Is there a way to access and read an Excel file stored within the assets folder using Angular?