web-dev-qa-db-fra.com

Angular - 'le sélecteur [le nom de votre composant] n'est pas valide')

Dans Angular 6 (6.0.7), j'essaie de générer un composant via la CLI. Je tape ng g c t1-2-3-user Et j'obtiens le message d'erreur Selector (app-t1-2-3-user) is invalid.

Y a-t-il quelque chose intrinsèquement interdit dans ce nom? J'ai déjà créé un module parent appelé t1-myModule Via ng g module t1-myModule Et il a été créé avec succès. Dans ce module, j'essaie de générer ce composant.

J'ai essayé de créer un nom différent comme ng g c t1-testComponent Et cela fonctionne très bien - donc la CLI ne semble pas être cassée. Angular n'apprécie pas le fait de nommer un composant t1-2-3-user Dans ma configuration.

EDIT:après des tests supplémentaires, il apparaît Angular n'aime pas que le premier caractère après un tiret - Soit un nombre). Peut-être une limitation similaire à celle des variables JavaScript. Je suppose qu'elle est compilée en JavaScript. Quelqu'un peut-il élaborer/confirmer cette contrainte de dénomination des composants?

angulartypescriptvisual-studio-codeangular-cliangular6
11
Kyle Vassella

Selon Normes W3C le sélecteur doit être qualifié ci-dessous ensemble de choses

En CSS, les identifiants (y compris les noms d'éléments, les classes et les ID dans les sélecteurs) peuvent contenir

  1. seuls les caractères [a-zA-Z0-9] et les caractères ISO 10646 U + 00A0 et supérieurs, plus le tiret (-) et le trait de soulignement (_);
  2. ils ne peuvent pas commencer par un chiffre, deux tirets ou un tiret suivi d'un chiffre
  3. Les identificateurs peuvent également contenir des caractères d'échappement et tout caractère ISO 10646 sous forme de code numérique (voir l'élément suivant). Par exemple, l'identifiant "B&W?" peut s'écrire "B\& W \?" ou "B\26 W\3F".

Angular suit donc la convention W3C pour le nom du sélecteur. On m'attendait à voir quelque chose de similaire cuit dans le code quelque part. Après avoir creusé dans le code CLI Il s'avère que angular utilise regex (/^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/) pour valider selector nom avant de créer des fichiers.

Ainsi, lors de l'exécution de la commande ng generate component component-name, Il appelle @angular/schematics Pour la commande component et lui transmet le paramètre de nom de composant. Lors de l'exécution de la commande avec un ensemble d'instructions, il se déclenche sous la ligne pour valider le sélecteur.

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