fix(@schematics/angular): add validation for component and directive class name

packages/schematics/angular/component/index.ts

@@ -25,7 +25,7 @@ import {
 import { addDeclarationToNgModule } from '../utility/add-declaration-to-ng-module';
 import { findModuleFromOptions } from '../utility/find-module';
 import { parseName } from '../utility/parse-name';
-import { validateHtmlSelector } from '../utility/validation';
+import { validateClassName, validateHtmlSelector } from '../utility/validation';
 import { buildDefaultPath, getWorkspace } from '../utility/workspace';
 import { Schema as ComponentOptions, Style } from './schema';
 
@@ -62,6 +62,7 @@ export default function (options: ComponentOptions): Rule {
       options.selector || buildSelector(options, (project && project.prefix) || '');
 
     validateHtmlSelector(options.selector);
+    validateClassName(strings.classify(options.name));
 
     const skipStyleFile = options.inlineStyle || options.style === Style.None;
     const templateSource = apply(url('./files'), [

packages/schematics/angular/component/index_spec.ts

@@ -157,6 +157,14 @@ describe('Component Schematic', () => {
     ).toBeRejectedWithError('Selector "app-1-one" is invalid.');
   });
 
+  it('should error when class name contains invalid characters', async () => {
+    const options = { ...defaultOptions, name: '404' };
+
+    await expectAsync(
+      schematicRunner.runSchematic('component', options, appTree),
+    ).toBeRejectedWithError('Class name "404" is invalid.');
+  });
+
   it('should allow dash in selector before a number', async () => {
     const options = { ...defaultOptions, name: 'one-1' };
 

packages/schematics/angular/directive/index.ts

@@ -23,7 +23,7 @@ import {
 import { addDeclarationToNgModule } from '../utility/add-declaration-to-ng-module';
 import { findModuleFromOptions } from '../utility/find-module';
 import { parseName } from '../utility/parse-name';
-import { validateHtmlSelector } from '../utility/validation';
+import { validateClassName, validateHtmlSelector } from '../utility/validation';
 import { buildDefaultPath, getWorkspace } from '../utility/workspace';
 import { Schema as DirectiveOptions } from './schema';
 
@@ -58,6 +58,7 @@ export default function (options: DirectiveOptions): Rule {
     options.selector = options.selector || buildSelector(options, project.prefix || '');
 
     validateHtmlSelector(options.selector);
+    validateClassName(strings.classify(options.name));
 
     const templateSource = apply(url('./files'), [
       options.skipTests ? filter((path) => !path.endsWith('.spec.ts.template')) : noop(),

packages/schematics/angular/directive/index_spec.ts

@@ -111,6 +111,14 @@ describe('Directive Schematic', () => {
     expect(directiveContent).toContain('class FooDirective');
   });
 
+  it('should error when class name contains invalid characters', async () => {
+    const options = { ...defaultOptions, name: '404' };
+
+    await expectAsync(
+      schematicRunner.runSchematic('component', options, appTree),
+    ).toBeRejectedWithError('Class name "404" is invalid.');
+  });
+
   describe('standalone=false', () => {
     const defaultNonStandaloneOptions: DirectiveOptions = {
       ...defaultOptions,