typescript - Angular-komponentnamnbegränsningar - 'väljare [ditt komponentnamn] är ogiltigt'

I Angular 6 (6.0.7) försöker jag generera en komponent via CLI. Jag skriver ng g c t1-2-3-user och får felmeddelandet Selector (app-t1-2-3-user) är ogiltig.

Finns det något som är i grunden förbjudet i detta namn? Jag har redan skapat en överordnad modul som heter t1-myModule via ng g module t1-myModule och den skapades framgångsrikt. Inom den modulen försöker jag nu generera denna komponent.

Jag har försökt skapa ett annat namn som ng g c t1-testComponent och det fungerar bra - så CLI verkar inte vara trasig. Något med att namnge en komponent t1-2-3-user i min setup gillar inte Angular.

REDIGERA: efter ytterligare tester verkar det som att Angular inte gillar att det första tecknet efter ett bindestreck - är en siffra. Möjligen en liknande begränsning som för JavaScript-variabler. Jag antar att det beror på att det kompileras till JavaScript? Kan någon utveckla/bekräfta denna begränsning för komponentnamn?

Svar #1

Enligt W3C-standarder ska selektorn uppfylla följande uppsättning saker

I CSS kan identifierare (inklusive elementnamn, klasser och ID:n i selektorer) innehålla

  1. endast tecknen [a-zA-Z0-9] och ISO 10646-tecken U+00A0 och högre, plus bindestreck (-) och understreck (_)
  2. de kan inte börja med en siffra, två bindestreck eller ett bindestreck följt av en siffra
  3. Identifierare kan också innehålla undkomna tecken och vilket ISO 10646-tecken som helst som en numerisk kod (se nästa punkt). Till exempel kan identifieraren "B&W?" skrivas som "B\&W\?" eller "B\26 W\3F".

Så Angular följer W3C-konventionen för selektornamn. Jag förväntade mig att se något liknande inbyggt i koden någonstans. Efter att ha grävt i CLI-koden visar det sig att Angular använder regex (/^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/) för att validera selector-namn innan filer skapas.

Så när man kör kommandot ng generate component component-name anropar det @angular/schematics för component-kommandot och skickar komponentnamnsparametern till det. När kommandot körs med en uppsättning instruktioner utlöses nedanstående rad för att validera väljaren.

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.`);
  }
}

Relaterade artiklar