Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular component naming limitations - 'selector [your component name] is invalid'

In Angular 6 (6.0.7) I'm trying to generate a component via the CLI. I type in ng g c t1-2-3-user and get the error message Selector (app-t1-2-3-user) is invalid.

Is there something inherently not allowed in this name? I've already created a parent module called t1-myModule via ng g module t1-myModule and it was created successfully. Within that module is where I'm trying to generate this component.

I've tried creating a different name like ng g c t1-testComponent and it works fine - so the CLI doesn't appear to be broken. Something about naming a component t1-2-3-user in my setup is not liked by Angular.

EDIT: after further testing, it appears Angular doesn't like the first character after a dash - to be a number. Possibly a similar limitation as in JavaScript variables. I assume since it gets compiled into JavaScript? Can anyone elaborate on/confirm this component naming constraint?

like image 979
Kyle Vassella Avatar asked Nov 09 '18 18:11

Kyle Vassella


People also ask

How to name a component in Angular?

Apart from the general naming guidelines discussed above, Angular mainly uses three case styles for naming artifacts. camelCase, PascalCase, and kebab-case. Knowing when and where to use each of these case styles is important. In the section below, I will go through each of the case styles and where to use them.

How to name modules in Angular?

Do use consistent type names for all components following a pattern that describes the component's feature then its type. A recommended pattern is feature.type.ts . Do use conventional type names including .service , .component , .pipe , .module , and .directive .

How do I create a new component in Angular using Visual Studio code?

Create a new Angular application using ng new or open an existing one. Open the command prompt or terminal. Alternatively, if you have your Angular application open in an IDE such as Visual Studio Code, you can use the built-in terminal. The new component will get created in a new folder, inside the src/app directory.

Why we use selector in Angular?

A selector is used to identify each component uniquely into the component tree, and it also defines how the current component is represented in the HTML DOM. When we create a new component using Angular CLI, the newly created component looks like this.


1 Answers

As per W3C standards selector should qualify below set of things

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

  1. only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);
  2. they cannot start with a digit, two hyphens, or a hyphen followed by a digit
  3. 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".

So Angular is following the W3C convention for selector name. I was expected to see similar thing baked in inside code somewhere. After digging into CLI code It turns out that angular uses regex (/^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/) to validate selector name before creating files.

So while running ng generate component component-name command it calls @angular/schematics for component command and pass the component name parameter to it. While executing command with set of instruction it fires below line to validate selector.

validateHtmlSelector(options.selector);

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.`);
  }
}
like image 114
Pankaj Parkar Avatar answered Sep 19 '22 09:09

Pankaj Parkar