Schematics class name validation

packages/angular_devkit/core/src/utils/strings.ts

@@ -74,13 +74,14 @@ export function camelize(str: string): string {
 /**
  Returns the UpperCamelCase form of a string.
 
+ @example
  ```javascript
  'innerHTML'.classify();          // 'InnerHTML'
  'action_name'.classify();        // 'ActionName'
  'css-class-name'.classify();     // 'CssClassName'
  'my favorite items'.classify();  // 'MyFavoriteItems'
+ 'app.component'.classify();      // 'AppComponent'
  ```
-
  @method classify
  @param {String} str the string to classify
  @return {String} the classified string
@@ -89,7 +90,7 @@ export function classify(str: string): string {
   return str
     .split('.')
     .map((part) => capitalize(camelize(part)))
-    .join('.');
+    .join('');
 }
 
 /**

packages/schematics/angular/class/index_spec.ts

@@ -83,7 +83,7 @@ describe('Class Schematic', () => {
     const tree = await schematicRunner.runSchematicAsync('class', options, appTree).toPromise();
     const classPath = '/projects/bar/src/app/foo.model.ts';
     const content = tree.readContent(classPath);
-    expect(content).toMatch(/export class Foo/);
+    expect(content).toMatch(/export class FooModel/);
   });
 
   it('should respect the path option', async () => {
@@ -109,4 +109,12 @@ describe('Class Schematic', () => {
     expect(tree.files).toContain('/projects/bar/src/app/foo.ts');
     expect(tree.files).not.toContain('/projects/bar/src/app/foo.spec.ts');
   });
+
+  it('should error when class name contains invalid characters', async () => {
+    const options = { ...defaultOptions, name: '1Clazz' };
+
+    await expectAsync(
+      schematicRunner.runSchematicAsync('class', options, appTree).toPromise(),
+    ).toBeRejectedWithError('Class name "1Clazz" is invalid.');
+  });
 });

packages/schematics/angular/component/index_spec.ts

@@ -209,7 +209,7 @@ describe('Component Schematic', () => {
 
     await expectAsync(
       schematicRunner.runSchematicAsync('component', options, appTree).toPromise(),
-    ).toBeRejectedWithError('Selector (app-1-one) is invalid.');
+    ).toBeRejectedWithError('Selector "app-1-one" is invalid.');
   });
 
   it('should use the default project prefix if none is passed', async () => {

packages/schematics/angular/enum/index_spec.ts

@@ -73,4 +73,12 @@ describe('Enum Schematic', () => {
     const tree = await schematicRunner.runSchematicAsync('enum', options, appTree).toPromise();
     expect(tree.files).toContain('/projects/bar/src/app/foo.enum.ts');
   });
+
+  it('should error when class name contains invalid characters', async () => {
+    const options = { ...defaultOptions, name: '1Clazz' };
+
+    await expectAsync(
+      schematicRunner.runSchematicAsync('enum', options, appTree).toPromise(),
+    ).toBeRejectedWithError('Class name "1Clazz" is invalid.');
+  });
 });

packages/schematics/angular/module/index.ts

@@ -33,6 +33,7 @@ import {
   findModuleFromOptions,
 } from '../utility/find-module';
 import { parseName } from '../utility/parse-name';
+import { validateClassName } from '../utility/validation';
 import { createDefaultPath } from '../utility/workspace';
 import { Schema as ModuleOptions, RoutingScope } from './schema';
 
@@ -149,6 +150,7 @@ export default function (options: ModuleOptions): Rule {
     const parsedPath = parseName(options.path, options.name);
     options.name = parsedPath.name;
     options.path = parsedPath.path;
+    validateClassName(strings.classify(options.name));
 
     const templateSource = apply(url('./files'), [
       options.routing || (isLazyLoadedModuleGen && routingModulePath)

packages/schematics/angular/module/index_spec.ts

@@ -71,6 +71,15 @@ describe('Module Schematic', () => {
     expect(content).toMatch(/imports: \[[^\]]*FooModule[^\]]*\]/m);
   });
 
+  it('should import into another module when using flat', async () => {
+    const options = { ...defaultOptions, flat: true, module: 'app.module.ts' };
+
+    const tree = await schematicRunner.runSchematicAsync('module', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/app.module.ts');
+    expect(content).toMatch(/import { FooModule } from '.\/foo.module'/);
+    expect(content).toMatch(/imports: \[[^\]]*FooModule[^\]]*\]/m);
+  });
+
   it('should import into another module (deep)', async () => {
     let tree = appTree;
 

packages/schematics/angular/pipe/index.ts

@@ -8,7 +8,6 @@
 
 import {
   Rule,
-  SchematicsException,
   Tree,
   apply,
   applyTemplates,
@@ -25,6 +24,7 @@ import { addDeclarationToModule, addExportToModule } from '../utility/ast-utils'
 import { InsertChange } from '../utility/change';
 import { buildRelativePath, findModuleFromOptions } from '../utility/find-module';
 import { parseName } from '../utility/parse-name';
+import { validateClassName } from '../utility/validation';
 import { createDefaultPath } from '../utility/workspace';
 import { Schema as PipeOptions } from './schema';
 
@@ -84,15 +84,13 @@ function addDeclarationToNgModule(options: PipeOptions): Rule {
 
 export default function (options: PipeOptions): Rule {
   return async (host: Tree) => {
-    if (options.path === undefined) {
-      options.path = await createDefaultPath(host, options.project as string);
-    }
-
+    options.path ??= await createDefaultPath(host, options.project as string);
     options.module = findModuleFromOptions(host, options);
 
     const parsedPath = parseName(options.path, options.name);
     options.name = parsedPath.name;
     options.path = parsedPath.path;
+    validateClassName(strings.classify(options.name));
 
     const templateSource = apply(url('./files'), [
       options.skipTests ? filter((path) => !path.endsWith('.spec.ts.template')) : noop(),

packages/schematics/angular/pipe/index_spec.ts

@@ -154,4 +154,12 @@ describe('Pipe Schematic', () => {
     expect(pipeContent).toContain('class FooPipe');
     expect(moduleContent).not.toContain('FooPipe');
   });
+
+  it('should error when class name contains invalid characters', async () => {
+    const options = { ...defaultOptions, name: '1Clazz' };
+
+    await expectAsync(
+      schematicRunner.runSchematicAsync('pipe', options, appTree).toPromise(),
+    ).toBeRejectedWithError('Class name "1Clazz" is invalid.');
+  });
 });

packages/schematics/angular/utility/generate-from-files.ts

@@ -20,6 +20,7 @@ import {
   url,
 } from '@angular-devkit/schematics';
 import { parseName } from './parse-name';
+import { validateClassName } from './validation';
 import { createDefaultPath } from './workspace';
 
 export interface GenerateFromFilesOptions {
@@ -44,6 +45,8 @@ export function generateFromFiles(
     options.name = parsedPath.name;
     options.path = parsedPath.path;
 
+    validateClassName(strings.classify(options.name));
+
     const templateSource = apply(url('./files'), [
       options.skipTests ? filter((path) => !path.endsWith('.spec.ts.template')) : noop(),
       applyTemplates({

packages/schematics/angular/utility/validation.ts

@@ -12,8 +12,17 @@ import { SchematicsException } from '@angular-devkit/schematics';
 // When adding a dash the segment after the dash must also start with a letter.
 export const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
 
+// 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.`);
+    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.`);
   }
 }