fix(bazel): Install packages after `ng add` when invoked independently (#29852)

PR Closes https://github.com/angular/angular/issues/29573

PR Close #29852

packages/bazel/src/schematics/ng-add/index.ts

@@ -10,6 +10,7 @@
 
 import {JsonAstObject, parseJsonAst} from '@angular-devkit/core';
 import {Rule, SchematicContext, SchematicsException, Tree, apply, applyTemplates, chain, mergeWith, url} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
 import {getWorkspacePath} from '@schematics/angular/utility/config';
 import {findPropertyInAstObject, insertPropertyInAstObjectInOrder} from '@schematics/angular/utility/json-utils';
 import {validateProjectName} from '@schematics/angular/utility/validation';
@@ -54,7 +55,10 @@ function addDevDependenciesToPackageJson(options: Schema) {
     };
 
     const recorder = host.beginUpdate(packageJson);
-    for (const packageName of Object.keys(devDependencies)) {
+    const depsToInstall = Object.keys(devDependencies).filter((name) => {
+      return !findPropertyInAstObject(devDeps, name);
+    });
+    for (const packageName of depsToInstall) {
       const version = devDependencies[packageName];
       const indent = 4;
       insertPropertyInAstObjectInOrder(recorder, devDeps, packageName, version, indent);
@@ -346,6 +350,17 @@ function addPostinstallToGenerateNgSummaries() {
   };
 }
 
+/**
+ * Schedule a task to perform npm / yarn install.
+ */
+function installNodeModules(options: Schema): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    if (!options.skipInstall) {
+      context.addTask(new NodePackageInstallTask());
+    }
+  };
+}
+
 export default function(options: Schema): Rule {
   return (host: Tree) => {
     validateProjectName(options.name);
@@ -360,6 +375,7 @@ export default function(options: Schema): Rule {
       updateGitignore(),
       updateTsconfigJson(),
       upgradeRxjs(),
+      installNodeModules(options),
     ]);
   };
 }

packages/bazel/src/schematics/ng-add/index_spec.ts

@@ -100,6 +100,19 @@ describe('ng-add schematic', () => {
     expect(devDeps).toContain('@bazel/karma');
   });
 
+  it('should not add an existing dev dependency', () => {
+    expect(host.files).toContain('/package.json');
+    const packageJson = JSON.parse(host.readContent('/package.json'));
+    packageJson.devDependencies['@angular/bazel'] = '4.2.42';
+    host.overwrite('/package.json', JSON.stringify(packageJson));
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const content = host.readContent('/package.json');
+    // It is possible that a dep gets added twice if the package already exists.
+    expect(content.match(/@angular\/bazel/g) !.length).toEqual(1);
+    const json = JSON.parse(content);
+    expect(json.devDependencies['@angular/bazel']).toBe('4.2.42');
+  });
+
   it('should not create Bazel workspace file', () => {
     host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
     const {files} = host;

packages/bazel/src/schematics/ng-add/schema.d.ts

@@ -1,6 +1,6 @@
 
-// THIS FILE IS AUTOMATICALLY GENERATED. TO UPDATE THIS FILE YOU NEED TO CHANGE
-// THE CORRESPONDING JSON SCHEMA FILE. See README.md.
+// THIS FILE IS AUTOMATICALLY GENERATED. TO UPDATE THIS FILE YOU NEED TO CHANGE THE
+// CORRESPONDING JSON SCHEMA FILE, THEN RUN devkit-admin build (or bazel build ...).
 
 // tslint:disable:no-global-tslint-disable
 // tslint:disable
@@ -10,4 +10,8 @@ export interface Schema {
    * The name of the project.
    */
   name: string;
+  /**
+   * When true, does not install dependency packages.
+   */
+  skipInstall?: boolean;
 }

packages/bazel/src/schematics/ng-add/schema.json

@@ -12,6 +12,11 @@
         "$source": "argv",
         "index": 0
       }
+    },
+    "skipInstall": {
+      "description": "When true, does not install dependency packages.",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": [

packages/bazel/src/schematics/ng-new/index.ts

@@ -18,9 +18,15 @@ export default function(options: Schema): Rule {
 
     return chain([
       externalSchematic('@schematics/angular', 'ng-new', options),
-      schematic('ng-add', options, {
-        scope: options.name,
-      }),
+      schematic(
+          'ng-add', {
+            name: options.name,
+            // skip install since `ng-new` above will schedule the task
+            skipInstall: true,
+          },
+          {
+            scope: options.name,
+          }),
     ]);
   };
 }