{"record":{"id":"a185a7d32f10dba5","repo":"angular/angular-cli","slug":"selector-selector-is-invalid","errorCode":null,"errorMessage":"Selector \"${selector}\" is invalid.","messagePattern":"Selector \"(.+?)\" is invalid\\.","errorType":"validation","errorClass":"SchematicsException","httpStatus":null,"severity":"error","filePath":"packages/schematics/angular/utility/validation.ts","lineNumber":21,"sourceCode":" * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { SchematicsException } from '@angular-devkit/schematics';\n\n// Must start with a letter, and must contain only alphanumeric characters or dashes.\n// When adding a dash the segment after the dash must also start with a letter.\nexport const htmlSelectorRe: RegExp =\n  /^[a-zA-Z][.0-9a-zA-Z]*((:?-[0-9]+)*|(:?-[a-zA-Z][.0-9a-zA-Z]*(:?-[0-9]+)*)*)$/;\n\n// See: https://github.com/tc39/proposal-regexp-unicode-property-escapes/blob/fe6d07fad74cd0192d154966baa1e95e7cda78a1/README.md#other-examples\nconst ecmaIdentifierNameRegExp = /^(?:[$_\\p{ID_Start}])(?:[$_\\u200C\\u200D\\p{ID_Continue}])*$/u;\n\nexport function validateHtmlSelector(selector: string): void {\n  if (selector && !htmlSelectorRe.test(selector)) {\n    throw new SchematicsException(`Selector \"${selector}\" is invalid.`);\n  }\n}\n\nexport function validateClassName(className: string): void {\n  if (!ecmaIdentifierNameRegExp.test(className)) {\n    throw new SchematicsException(`Class name \"${className}\" is invalid.`);\n  }\n}\n","sourceCodeStart":3,"sourceCodeEnd":30,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/schematics/angular/utility/validation.ts#L3-L30","documentation":"The Angular CLI schematics throw this SchematicsException when a component or directive selector fails the htmlSelectorRe regex validation. Selectors must be valid HTML-ish custom element/attribute names: typically kebab-case, containing only letters, digits, and hyphens, with each element starting with a lowercase letter. The check runs in validateHtmlSelector before generating the component/directive files.","triggerScenarios":"Running `ng generate component` or `ng generate directive` with a --selector value that contains invalid characters: camelCase segments without hyphens are allowed only for element/attr patterns, but selectors with uppercase-invalid tokens, leading digits, underscores, dots in the wrong place, spaces, or an empty pattern fail the test.","commonSituations":"Copy-pasting a selector from another framework (e.g. React-style PascalCase), using underscores instead of hyphens (my_selector), starting the selector with a number, including special characters or spaces, or typing the selector in non-latin scripts not covered by the regex.","solutions":["Rewrite the selector in lowercase kebab-case, e.g. app-user-profile instead of AppUserProfile or app_user_profile.","Prefix the selector with your application prefix (default 'app') followed by a hyphen, e.g. app-dashboard.","Remove any invalid characters (digits at start, underscores, spaces, symbols) from the --selector option.","If the selector is intentionally non-standard, generate the component without a selector and edit the file manually."],"exampleFix":"// before\nng generate component user-list --selector=UserList\n// after\nng generate component user-list --selector=app-user-list","handlingStrategy":"validation","validationCode":"const htmlSelectorRe = /^(?:(?:app|ng)[A-Za-z0-9]*)(?:-[A-Za-z0-9]+)*$/;\nif (!htmlSelectorRe.test(selector)) {\n  throw new Error(`Selector \"${selector}\" must be kebab-case, e.g. app-user-profile`);\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always prefix selectors with the project prefix followed by a hyphen (app-, or custom prefix in angular.json).","Use only lowercase letters, digits, and hyphens; never underscores or PascalCase in the selector string.","Configure \"prefix\" in angular.json so schematics default to a valid prefix automatically."],"tags":["schematics","validation","naming"],"backgroundTag":"invalid-html-selector","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}