fix(@schematics/angular): Allow for scoped library names

fixes angular/angular-cli#10172

Author: Brocco

packages/schematics/angular/application/index.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { normalize, relative, strings, tags } from '@angular-devkit/core';
+import { normalize, relative, strings } from '@angular-devkit/core';
 import { experimental } from '@angular-devkit/core';
 import {
   MergeStrategy,
@@ -26,6 +26,7 @@ import {
 import { Schema as E2eOptions } from '../e2e/schema';
 import { getWorkspace, getWorkspacePath } from '../utility/config';
 import { latestVersions } from '../utility/latest-versions';
+import { validateProjectName } from '../utility/validation';
 import { Schema as ApplicationOptions } from './schema';
 
 type WorkspaceSchema = experimental.workspace.WorkspaceSchema;
@@ -226,43 +227,6 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
     host.overwrite(getWorkspacePath(host), JSON.stringify(workspace, null, 2));
   };
 }
-const projectNameRegexp = /^[a-zA-Z][.0-9a-zA-Z]*(-[.0-9a-zA-Z]*)*$/;
-const unsupportedProjectNames = ['test', 'ember', 'ember-cli', 'vendor', 'app'];
-
-function getRegExpFailPosition(str: string): number | null {
-  const parts = str.indexOf('-') >= 0 ? str.split('-') : [str];
-  const matched: string[] = [];
-
-  parts.forEach(part => {
-    if (part.match(projectNameRegexp)) {
-      matched.push(part);
-    }
-  });
-
-  const compare = matched.join('-');
-
-  return (str !== compare) ? compare.length : null;
-}
-
-function validateProjectName(projectName: string) {
-  const errorIndex = getRegExpFailPosition(projectName);
-  if (errorIndex !== null) {
-    const firstMessage = tags.oneLine`
-      Project name "${projectName}" is not valid. New project names 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.
-    `;
-    const msg = tags.stripIndent`
-      ${firstMessage}
-      ${projectName}
-      ${Array(errorIndex + 1).join(' ') + '^'}
-    `;
-    throw new SchematicsException(msg);
-  } else if (unsupportedProjectNames.indexOf(projectName) !== -1) {
-    throw new SchematicsException(`Project name "${projectName}" is not a supported name.`);
-  }
-
-}
 
 export default function (options: ApplicationOptions): Rule {
   return (host: Tree, context: SchematicContext) => {

packages/schematics/angular/application/schema.json

@@ -12,7 +12,6 @@
     "name": {
       "description": "The name of the application.",
       "type": "string",
-      "format": "html-selector",
       "$default": {
         "$source": "argv",
         "index": 0

packages/schematics/angular/library/files/__projectRoot__/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "<%= dasherize(name) %>",
+  "name": "<%= packageName %>",
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",

packages/schematics/angular/library/index.ts

@@ -22,6 +22,7 @@ import {
 } from '@angular-devkit/schematics';
 import { WorkspaceSchema, getWorkspace, getWorkspacePath } from '../utility/config';
 import { latestVersions } from '../utility/latest-versions';
+import { validateProjectName } from '../utility/validation';
 import { Schema as LibraryOptions } from './schema';
 
 
@@ -171,17 +172,30 @@ export default function (options: LibraryOptions): Rule {
     if (!options.name) {
       throw new SchematicsException(`Invalid options, "name" is required.`);
     }
-    const name = options.name;
+    validateProjectName(options.name);
+
+    // If scoped project (i.e. "@foo/bar"), convert projectDir to "foo/bar".
+    const packageName = options.name;
+    let scopeName = '';
+    if (/^@.*\/.*/.test(options.name)) {
+      const [scope, name] = options.name.split('/');
+      scopeName = scope.replace(/^@/, '');
+      options.name = name;
+    }
 
     const workspace = getWorkspace(host);
     const newProjectRoot = workspace.newProjectRoot;
-    const projectRoot = `${newProjectRoot}/${options.name}`;
+    let projectRoot = `${newProjectRoot}/${options.name}`;
+    if (scopeName) {
+      projectRoot = `${newProjectRoot}/${scopeName}/${options.name}`;
+    }
     const sourceDir = `${projectRoot}/src/lib`;
 
     const templateSource = apply(url('./files'), [
       template({
         ...strings,
         ...options,
+        packageName,
         projectRoot,
       }),
       // TODO: Moving inside `branchAndMerge` should work but is bugged right now.
@@ -193,27 +207,27 @@ export default function (options: LibraryOptions): Rule {
       branchAndMerge(mergeWith(templateSource)),
       addAppToWorkspaceFile(options, workspace),
       options.skipPackageJson ? noop() : addDependenciesToPackageJson(),
-      options.skipTsConfig ? noop() : updateTsConfig(name),
+      options.skipTsConfig ? noop() : updateTsConfig(options.name),
       schematic('module', {
-        name: name,
+        name: options.name,
         commonModule: false,
         flat: true,
         path: sourceDir,
         spec: false,
       }),
       schematic('component', {
-        name: name,
+        name: options.name,
         inlineStyle: true,
         inlineTemplate: true,
         flat: true,
         path: sourceDir,
         export: true,
       }),
       schematic('service', {
-        name: name,
+        name: options.name,
         flat: true,
         path: sourceDir,
-        module: `${name}.module.ts`,
+        module: `${options.name}.module.ts`,
       }),
     ])(host, context);
   };

packages/schematics/angular/library/index_spec.ts

@@ -166,4 +166,21 @@ describe('Library Schematic', () => {
       expect(tsConfigJson.compilerOptions.paths).toBeUndefined();
     });
   });
+
+  it(`should support creating scoped libraries`, () => {
+    const scopedName = '@myscope/mylib';
+    const options = { ...defaultOptions, name: scopedName };
+    const tree = schematicRunner.runSchematic('library', options, workspaceTree);
+
+    const pkgJsonPath = '/projects/myscope/mylib/package.json';
+    expect(tree.files).toContain(pkgJsonPath);
+    expect(tree.files).toContain('/projects/myscope/mylib/src/lib/mylib.module.ts');
+    expect(tree.files).toContain('/projects/myscope/mylib/src/lib/mylib.component.ts');
+
+    const pkgJson = JSON.parse(tree.readContent(pkgJsonPath));
+    expect(pkgJson.name).toEqual(scopedName);
+
+    const tsConfigJson = JSON.parse(tree.readContent('/projects/myscope/mylib/tsconfig.spec.json'));
+    expect(tsConfigJson.extends).toEqual('../../../tsconfig.json');
+  });
 });

packages/schematics/angular/utility/validation.ts

@@ -25,3 +25,49 @@ export function validateHtmlSelector(selector: string): void {
         is invalid.`);
   }
 }
+
+
+export function validateProjectName(projectName: string) {
+  const errorIndex = getRegExpFailPosition(projectName);
+  const unsupportedProjectNames = ['test', 'ember', 'ember-cli', 'vendor', 'app'];
+  if (errorIndex !== null) {
+    const firstMessage = tags.oneLine`
+    Project name "${projectName}" is not valid. New project names 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.
+    `;
+    const msg = tags.stripIndent`
+    ${firstMessage}
+    ${projectName}
+    ${Array(errorIndex + 1).join(' ') + '^'}
+    `;
+    throw new SchematicsException(msg);
+  } else if (unsupportedProjectNames.indexOf(projectName) !== -1) {
+    throw new SchematicsException(`Project name "${projectName}" is not a supported name.`);
+  }
+}
+
+function getRegExpFailPosition(str: string): number | null {
+  const isScope = /^@.*\/.*/.test(str);
+  if (isScope) {
+    // Remove starting @
+    str = str.replace(/^@/, '');
+    // Change / to - for validation
+    str = str.replace(/\//g, '-');
+  }
+
+  const parts = str.indexOf('-') >= 0 ? str.split('-') : [str];
+  const matched: string[] = [];
+
+  const projectNameRegexp = /^[a-zA-Z][.0-9a-zA-Z]*(-[.0-9a-zA-Z]*)*$/;
+
+  parts.forEach(part => {
+    if (part.match(projectNameRegexp)) {
+      matched.push(part);
+    }
+  });
+
+  const compare = matched.join('-');
+
+  return (str !== compare) ? compare.length : null;
+}