angular/angular-cli · error · SchematicsException

Selector "${selector}" is invalid.

Error message

Selector "${selector}" is invalid.

What it means

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.

Source

Thrown at packages/schematics/angular/utility/validation.ts:21

 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import { SchematicsException } from '@angular-devkit/schematics';

// Must start with a letter, and must contain only alphanumeric characters or dashes.
// When adding a dash the segment after the dash must also start with a letter.
export const htmlSelectorRe: RegExp =
  /^[a-zA-Z][.0-9a-zA-Z]*((:?-[0-9]+)*|(:?-[a-zA-Z][.0-9a-zA-Z]*(:?-[0-9]+)*)*)$/;

// See: https://github.com/tc39/proposal-regexp-unicode-property-escapes/blob/fe6d07fad74cd0192d154966baa1e95e7cda78a1/README.md#other-examples
const ecmaIdentifierNameRegExp = /^(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$/u;

export function validateHtmlSelector(selector: string): void {
  if (selector && !htmlSelectorRe.test(selector)) {
    throw new SchematicsException(`Selector "${selector}" is invalid.`);
  }
}

export function validateClassName(className: string): void {
  if (!ecmaIdentifierNameRegExp.test(className)) {
    throw new SchematicsException(`Class name "${className}" is invalid.`);
  }
}

View on GitHub (pinned to bb72145f9a)

Solutions

1. Rewrite the selector in lowercase kebab-case, e.g. app-user-profile instead of AppUserProfile or app_user_profile.
2. Prefix the selector with your application prefix (default 'app') followed by a hyphen, e.g. app-dashboard.
3. Remove any invalid characters (digits at start, underscores, spaces, symbols) from the --selector option.
4. If the selector is intentionally non-standard, generate the component without a selector and edit the file manually.

Example fix

// before
ng generate component user-list --selector=UserList
// after
ng generate component user-list --selector=app-user-list

const htmlSelectorRe = /^(?:(?:app|ng)[A-Za-z0-9]*)(?:-[A-Za-z0-9]+)*$/;
if (!htmlSelectorRe.test(selector)) {
  throw new Error(`Selector "${selector}" must be kebab-case, e.g. app-user-profile`);
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Schematics has invalid name: "${name}".
• RunSchematicTask requires an options object with a non-empty
• Schematic input does not validate against the Schema: ${JSON
• Invalid collection.json; schematics needs to be an object.
• Unsupported '${strings.classify(selectedTool)}' MCP server c

AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/a185a7d32f10dba5. Report an issue: GitHub.