angular/angular-cli · error · SchematicsException

Class name "${className}" is invalid.

Error message

Class name "${className}" is invalid.

What it means

validateClassName rejects class names that are not valid ECMAScript identifiers before generating components, directives, modules, pipes, services, or file-based schematics. It tests the derived class name against ecmaIdentifierNameRegExp, which enforces ID_Start/ID_Continue unicode property escapes, so the generated TypeScript file would otherwise not compile.

Source

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

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. Rename the schematic input to a valid identifier: letters, $, _ first, then letters/digits/$/_, e.g. user-profile becomes UserProfile internally — use `ng generate service user-profile` without extra symbols.
  2. Remove leading digits or punctuation from the name, e.g. 2fa-auth -> two-factor-auth.
  3. Quote and escape nothing: pass a plain name and let the CLI derive the class name; avoid paths with stray characters.
  4. Generate with a valid name and manually rename the exported class afterwards if a non-standard name is required.

Example fix

// before
ng generate service 2fa-auth
// after
ng generate service two-factor-auth
Defensive patterns

Strategy: validation

Validate before calling

const ecmaIdentifierNameRegExp = /^(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$/u;
const className = name.replace(/-([a-z])/g, (_, c) => c.toUpperCase()).replace(/^[0-9]/, '_');
if (!ecmaIdentifierNameRegExp.test(className)) {
  throw new Error(`Name "${name}" cannot produce a valid TS class name`);
}

Prevention

When it happens

Trigger: Running `ng generate component|directive|module|pipe|service` (or generateFromFiles) with a --name that yields an invalid identifier: leading digits, hyphens, spaces, symbols like 'my-component' or '2fa-service' that cannot become a valid TS class name.

Common situations: Passing kebab-case names with special characters expecting auto-conversion, starting names with a number, names containing slashes or spaces, or non-ASCII names rejected by the strict unicode identifier regex.

Related errors


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