fix(@angular/cli): Read schematic option values from angular.json

Author: Brocco

packages/@angular/cli/commands/generate.ts

@@ -25,6 +25,7 @@ export default class GenerateCommand extends SchematicCommand {
     if (this.initialized) {
       return;
     }
+    super.initialize(options);
     this.initialized = true;
 
     const [collectionName, schematicName] = this.parseSchematicInfo(options);

packages/@angular/cli/commands/new.ts

@@ -31,6 +31,7 @@ export default class NewCommand extends SchematicCommand {
     if (this.initialized) {
       return Promise.resolve();
     }
+    super.initialize(options);
     this.initialized = true;
 
     const collectionName = this.parseCollectionName(options);

packages/@angular/cli/models/schematic-command.ts

@@ -5,7 +5,7 @@ import { ArgumentStrategy, Command, Option } from './command';
 import { NodeWorkflow } from '@angular-devkit/schematics/tools';
 import { DryRunEvent, UnsuccessfulWorkflowExecution } from '@angular-devkit/schematics';
 import { getCollection, getSchematic } from '../utilities/schematics';
-import { tap } from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 import { WorkspaceLoader } from '../models/workspace-loader';
 import chalk from 'chalk';
 
@@ -46,6 +46,7 @@ export abstract class SchematicCommand extends Command {
   readonly options: Option[] = [];
   private _host = new NodeJsSyncHost();
   private _workspace: experimental.workspace.Workspace;
+  private _deAliasedName: string;
   argStrategy = ArgumentStrategy.Nothing;
 
   protected readonly coreOptions: Option[] = [
@@ -97,10 +98,7 @@ export abstract class SchematicCommand extends Command {
     const pathOptions = this.setPathOptions(schematicOptions, workingDir);
     schematicOptions = { ...schematicOptions, ...pathOptions };
     const defaultOptions = this.readDefaults(collectionName, schematicName, schematicOptions);
-    // schematicOptions = { ...schematicOptions, ...defaultOptions };
-    schematicOptions.x = defaultOptions;
-    delete schematicOptions.x;
-
+    schematicOptions = { ...schematicOptions, ...defaultOptions };
 
     // Pass the rest of the arguments as the smart default "argv". Then delete it.
     // Removing the first item which is the schematic name.
@@ -194,6 +192,7 @@ export abstract class SchematicCommand extends Command {
     const collection = getCollection(collectionName);
 
     const schematic = getSchematic(collection, options.schematicName);
+    this._deAliasedName = schematic.description.name;
 
     if (!schematic.description.schemaJson) {
       return Promise.resolve(null);
@@ -300,9 +299,8 @@ export abstract class SchematicCommand extends Command {
     }
     const workspaceLoader = new WorkspaceLoader(this._host);
 
-    return workspaceLoader.loadWorkspace().pipe(
-      tap(workspace => this._workspace = workspace),
-    );
+    workspaceLoader.loadWorkspace().pipe(take(1))
+      .subscribe(workspace => this._workspace = workspace);
   }
 
   private readDefaults(collectionName: string, schematicName: string, options: any): any {
@@ -312,15 +310,19 @@ export abstract class SchematicCommand extends Command {
       return {};
     }
 
+    if (this._deAliasedName) {
+      schematicName = this._deAliasedName;
+    }
+
     // read and set workspace defaults
     const wsSchematics = this._workspace.getSchematics();
     if (wsSchematics) {
       let key = collectionName;
-      if (wsSchematics[collectionName] && typeof wsSchematics[key] === 'object') {
+      if (wsSchematics[key] && typeof wsSchematics[key] === 'object') {
         defaults = {...defaults, ...<object> wsSchematics[key]};
       }
       key = collectionName + ':' + schematicName;
-      if (wsSchematics[collectionName] && typeof wsSchematics[key] === 'object') {
+      if (wsSchematics[key] && typeof wsSchematics[key] === 'object') {
         defaults = {...defaults, ...<object> wsSchematics[key]};
       }
     }
@@ -331,15 +333,14 @@ export abstract class SchematicCommand extends Command {
       projectName = this._workspace.listProjectNames()[0];
     }
     if (projectName) {
-      const project = this._workspace.getProject(projectName);
-      const prjSchematics = project.schematics;
+      const prjSchematics = this._workspace.getProjectSchematics(projectName);
       if (prjSchematics) {
         let key = collectionName;
-        if (prjSchematics[collectionName] && typeof prjSchematics[key] === 'object') {
+        if (prjSchematics[key] && typeof prjSchematics[key] === 'object') {
           defaults = {...defaults, ...<object> prjSchematics[key]};
         }
         key = collectionName + ':' + schematicName;
-        if (prjSchematics[collectionName] && typeof prjSchematics[key] === 'object') {
+        if (prjSchematics[key] && typeof prjSchematics[key] === 'object') {
           defaults = {...defaults, ...<object> prjSchematics[key]};
         }
       }

tests/e2e/tests/generate/component/component-flat.ts

@@ -5,16 +5,12 @@ import {updateJsonFile} from '../../../utils/project';
 
 
 export default function() {
-  const appDir = join('projects', 'test-project', 'src');
-
+  const appDir = join('projects', 'test-project', 'src', 'app');
   return Promise.resolve()
-    // .then(() => updateJsonFile('angular.json', configJson => {
-    //   const comp = configJson.defaults.component;
-    //   comp.flat = true;
-    // }))
-    .then(() => updateJsonFile('angular.json', j => {
-      j.projects['test-project']
-        .schematics['@schematics/angular:component'] = { flat: true };
+    .then(() => updateJsonFile('angular.json', configJson => {
+      configJson.projects['test-project'].schematics = {
+        '@schematics/angular:component': { flat: true }
+      };
     }))
     .then(() => ng('generate', 'component', 'test-component'))
     .then(() => expectFileToExist(appDir))

tests/e2e/tests/generate/component/component-not-flat.ts

@@ -9,8 +9,9 @@ export default function() {
 
   return Promise.resolve()
     .then(() => updateJsonFile('angular.json', configJson => {
-      const comp = configJson.defaults.component;
-      comp.flat = false;
+      configJson.projects['test-project'].schematics = {
+        '@schematics/angular:component': { flat: false }
+      };
     }))
     .then(() => ng('generate', 'component', 'test-component'))
     .then(() => expectFileToExist(componentDir))

tests/e2e/tests/generate/component/component-prefix.ts

@@ -5,18 +5,20 @@ import { updateJsonFile } from '../../../utils/project';
 
 
 export default function() {
-  const componentDir = join('src', 'app', 'test-component');
+  const testCompDir = join('projects', 'test-project', 'src', 'app', 'test-component');
+  const aliasCompDir = join('projects', 'test-project', 'src', 'app', 'alias');
 
   return Promise.resolve()
     .then(() => updateJsonFile('angular.json', configJson => {
-      const app = configJson['apps'][0];
-      app['prefix'] = 'pre';
+      configJson.projects['test-project'].schematics = {
+        '@schematics/angular:component': { prefix: 'pre' }
+      };
     }))
     .then(() => ng('generate', 'component', 'test-component'))
-    .then(() => expectFileToMatch(join(componentDir, 'test-component.component.ts'),
+    .then(() => expectFileToMatch(join(testCompDir, 'test-component.component.ts'),
       /selector: 'pre-/))
     .then(() => ng('g', 'c', 'alias'))
-    .then(() => expectFileToMatch(join('src', 'app', 'alias', 'alias.component.ts'),
+    .then(() => expectFileToMatch(join(aliasCompDir, 'alias.component.ts'),
       /selector: 'pre-/))
 
     // Try to run the unit tests.

tests/e2e/tests/generate/directive/directive-prefix.ts

@@ -5,12 +5,13 @@ import { updateJsonFile } from '../../../utils/project';
 
 
 export default function() {
-  const directiveDir = join('src', 'app');
+  const directiveDir = join('projects', 'test-project', 'src', 'app');
 
   return Promise.resolve()
     .then(() => updateJsonFile('angular.json', configJson => {
-      const app = configJson['apps'][0];
-      app['prefix'] = 'pre';
+      configJson.projects['test-project'].schematics = {
+        '@schematics/angular:directive': { prefix: 'pre' }
+      };
     }))
     .then(() => ng('generate', 'directive', 'test-directive'))
     .then(() => expectFileToMatch(join(directiveDir, 'test-directive.directive.ts'),

tests/e2e_runner.ts

@@ -108,11 +108,6 @@ const allTests = glob.sync(path.join(e2eRoot, testGlob), { nodir: true, ignore:
   .filter(name => !name.endsWith('different-file-format.ts'))
   // Not sure what this test is meant to test, but with depedency changes it is not valid anymore.
   .filter(name => !name.endsWith('loaders-resolution.ts'))
-  // TODO:CONFIG READING
-  .filter(name => !name.endsWith('/component-flat.ts'))
-  .filter(name => !name.endsWith('/component-not-flat.ts'))
-  .filter(name => !name.endsWith('/component-prefix.ts'))
-  .filter(name => !name.endsWith('/directive-prefix.ts'))
   // NEW COMMAND
   .filter(name => !name.includes('tests/commands/new/'))
   // NEEDS devkit change