refactor(bazel): Create ng-add schematic for Bazel (#28436)

The logic to create additional files needed for Bazel are currently
hosted in `ng new`. Such files include the main.*.ts files needed
for AOT and a different angular.json to use Bazel builder, among others.

This commit refactors the logic into `ng add` so that it can be used to
perform the same modifications in an existing project. Users could do so
by running `ng add @angular/bazel`.

With this change, `ng new` effectively becomes an orchestrator that runs
the original `ng new` followed by `ng add @angular/bazel`.

PR Close #28436

packages/bazel/src/schematics/ng-add/BUILD.bazel

@@ -0,0 +1,36 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "ng-add",
+    srcs = [
+        "index.ts",
+        "schema.d.ts",
+    ],
+    data = glob(["files/**/*"]) + [
+        "schema.json",
+    ],
+    deps = [
+        "//packages/bazel/src/schematics/bazel-workspace",
+        "@ngdeps//@angular-devkit/core",
+        "@ngdeps//@angular-devkit/schematics",
+        "@ngdeps//@schematics/angular",
+        "@ngdeps//typescript",
+    ],
+)
+
+ts_library(
+    name = "test",
+    testonly = True,
+    srcs = [
+        "index_spec.ts",
+    ],
+    data = [
+        "//packages/bazel/src/schematics:package_assets",
+    ],
+    deps = [
+        ":ng-add",
+        "@ngdeps//@angular-devkit/schematics",
+    ],
+)

packages/bazel/src/schematics/ng-add/files/main.dev.ts.template

@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

packages/bazel/src/schematics/ng-add/files/main.prod.ts.template

@@ -0,0 +1,6 @@
+import {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app/app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

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

@@ -0,0 +1,232 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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
+ *
+ * @fileoverview Schematics for ng-new project that builds with Bazel.
+ */
+
+import {SchematicContext, apply, applyTemplates, chain, mergeWith, move, Rule, schematic, Tree, url, SchematicsException, UpdateRecorder,} from '@angular-devkit/schematics';
+import {parseJsonAst, JsonAstObject, strings, JsonValue} from '@angular-devkit/core';
+import {findPropertyInAstObject, insertPropertyInAstObjectInOrder} from '@schematics/angular/utility/json-utils';
+import {validateProjectName} from '@schematics/angular/utility/validation';
+import {getWorkspacePath} from '@schematics/angular/utility/config';
+import {Schema} from './schema';
+
+/**
+ * Packages that build under Bazel require additional dev dependencies. This
+ * function adds those dependencies to "devDependencies" section in
+ * package.json.
+ */
+function addDevDependenciesToPackageJson(options: Schema) {
+  return (host: Tree) => {
+    const packageJson = 'package.json';
+    if (!host.exists(packageJson)) {
+      throw new Error(`Could not find ${packageJson}`);
+    }
+    const packageJsonContent = host.read(packageJson);
+    if (!packageJsonContent) {
+      throw new Error('Failed to read package.json content');
+    }
+    const jsonAst = parseJsonAst(packageJsonContent.toString()) as JsonAstObject;
+    const deps = findPropertyInAstObject(jsonAst, 'dependencies') as JsonAstObject;
+    const devDeps = findPropertyInAstObject(jsonAst, 'devDependencies') as JsonAstObject;
+
+    const angularCoreNode = findPropertyInAstObject(deps, '@angular/core');
+    if (!angularCoreNode) {
+      throw new Error('@angular/core dependency not found in package.json');
+    }
+    const angularCoreVersion = angularCoreNode.value as string;
+
+    const devDependencies: {[k: string]: string} = {
+      '@angular/bazel': angularCoreVersion,
+      // TODO(kyliau): Consider moving this to latest-versions.ts
+      '@bazel/bazel': '^0.22.1',
+      '@bazel/ibazel': '^0.9.0',
+      '@bazel/karma': '^0.22.1',
+      '@bazel/typescript': '^0.22.1',
+    };
+
+    const recorder = host.beginUpdate(packageJson);
+    for (const packageName of Object.keys(devDependencies)) {
+      const version = devDependencies[packageName];
+      const indent = 4;
+      insertPropertyInAstObjectInOrder(recorder, devDeps, packageName, version, indent);
+    }
+    host.commitUpdate(recorder);
+    return host;
+  };
+}
+
+/**
+ * Append main.dev.ts and main.prod.ts to src directory. These files are needed
+ * by Bazel for devserver and prodserver, respectively. They are different from
+ * main.ts generated by CLI because they use platformBrowser (AOT) instead of
+ * platformBrowserDynamic (JIT).
+ */
+function addDevAndProdMainForAot(options: Schema) {
+  return (host: Tree) => {
+    return mergeWith(apply(url('./files'), [
+      applyTemplates({
+        utils: strings,
+        ...options,
+        'dot': '.',
+      }),
+      move('/src'),
+    ]));
+  };
+}
+
+/**
+ * Append '/bazel-out' to the gitignore file.
+ */
+function updateGitignore() {
+  return (host: Tree) => {
+    const gitignore = '/.gitignore';
+    if (!host.exists(gitignore)) {
+      return host;
+    }
+    const gitIgnoreContent = host.read(gitignore).toString();
+    if (gitIgnoreContent.includes('\n/bazel-out\n')) {
+      return host;
+    }
+    const compiledOutput = '# compiled output\n';
+    const index = gitIgnoreContent.indexOf(compiledOutput);
+    const insertionIndex = index >= 0 ? index + compiledOutput.length : gitIgnoreContent.length;
+    const recorder = host.beginUpdate(gitignore);
+    recorder.insertRight(insertionIndex, '/bazel-out\n');
+    host.commitUpdate(recorder);
+    return host;
+  };
+}
+
+function replacePropertyInAstObject(
+    recorder: UpdateRecorder, node: JsonAstObject, propertyName: string, value: JsonValue,
+    indent: number) {
+  const property = findPropertyInAstObject(node, propertyName);
+  if (property === null) {
+    throw new Error(`Property ${propertyName} does not exist in JSON object`);
+  }
+  const {start, text} = property;
+  recorder.remove(start.offset, text.length);
+  const indentStr = '\n' +
+      ' '.repeat(indent);
+  const content = JSON.stringify(value, null, '  ').replace(/\n/g, indentStr);
+  recorder.insertLeft(start.offset, content);
+}
+
+function updateAngularJsonToUseBazelBuilder(options: Schema): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    const {name} = options;
+    const workspacePath = getWorkspacePath(host);
+    if (!workspacePath) {
+      throw new Error('Could not find angular.json');
+    }
+    const workspaceContent = host.read(workspacePath).toString();
+    const workspaceJsonAst = parseJsonAst(workspaceContent) as JsonAstObject;
+    const projects = findPropertyInAstObject(workspaceJsonAst, 'projects');
+    if (!projects) {
+      throw new SchematicsException('Expect projects in angular.json to be an Object');
+    }
+    const project = findPropertyInAstObject(projects as JsonAstObject, name);
+    if (!project) {
+      throw new SchematicsException(`Expected projects to contain ${name}`);
+    }
+    const recorder = host.beginUpdate(workspacePath);
+    const indent = 8;
+    const architect =
+        findPropertyInAstObject(project as JsonAstObject, 'architect') as JsonAstObject;
+    replacePropertyInAstObject(
+        recorder, architect, 'build', {
+          builder: '@angular/bazel:build',
+          options: {
+            targetLabel: '//src:bundle.js',
+            bazelCommand: 'build',
+          },
+          configurations: {
+            production: {
+              targetLabel: '//src:bundle',
+            },
+          },
+        },
+        indent);
+    replacePropertyInAstObject(
+        recorder, architect, 'serve', {
+          builder: '@angular/bazel:build',
+          options: {
+            targetLabel: '//src:devserver',
+            bazelCommand: 'run',
+          },
+          configurations: {
+            production: {
+              targetLabel: '//src:prodserver',
+            },
+          },
+        },
+        indent);
+    replacePropertyInAstObject(
+        recorder, architect, 'test', {
+          builder: '@angular/bazel:build',
+          options: {'bazelCommand': 'test', 'targetLabel': '//src/...'},
+        },
+        indent);
+
+    const e2e = `${options.name}-e2e`;
+    const e2eNode = findPropertyInAstObject(projects as JsonAstObject, e2e);
+    if (e2eNode) {
+      const architect =
+          findPropertyInAstObject(e2eNode as JsonAstObject, 'architect') as JsonAstObject;
+      replacePropertyInAstObject(
+          recorder, architect, 'e2e', {
+            builder: '@angular/bazel:build',
+            options: {
+              bazelCommand: 'test',
+              targetLabel: '//e2e:devserver_test',
+            },
+            configurations: {
+              production: {
+                targetLabel: '//e2e:prodserver_test',
+              },
+            }
+          },
+          indent);
+    }
+
+    host.commitUpdate(recorder);
+    return host;
+  };
+}
+
+/**
+ * Create a backup for the original angular.json file in case user wants to
+ * eject Bazel and revert to the original workflow.
+ */
+function backupAngularJson(): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    const workspacePath = getWorkspacePath(host);
+    if (!workspacePath) {
+      return;
+    }
+    host.create(
+        `${workspacePath}.bak`, '// This is a backup file of the original angular.json. ' +
+            'This file is needed in case you want to revert to the workflow without Bazel.\n\n' +
+            host.read(workspacePath));
+  };
+}
+
+export default function(options: Schema): Rule {
+  return (host: Tree) => {
+    validateProjectName(options.name);
+
+    return chain([
+      schematic('bazel-workspace', options),
+      addDevAndProdMainForAot(options),
+      addDevDependenciesToPackageJson(options),
+      backupAngularJson(),
+      updateAngularJsonToUseBazelBuilder(options),
+      updateGitignore(),
+    ]);
+  };
+}

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

@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {HostTree} from '@angular-devkit/schematics';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+
+describe('ng-add schematic', () => {
+
+  const defaultOptions = {name: 'demo'};
+  let host: UnitTestTree;
+  let schematicRunner: SchematicTestRunner;
+
+  beforeEach(() => {
+    host = new UnitTestTree(new HostTree());
+    host.create('package.json', JSON.stringify({
+      name: 'demo',
+      dependencies: {
+        '@angular/core': '1.2.3',
+      },
+      devDependencies: {
+        'typescript': '3.2.2',
+      },
+    }));
+    host.create('angular.json', JSON.stringify({
+      projects: {
+        'demo': {
+          architect: {
+            build: {},
+            serve: {},
+            test: {},
+            'extract-i18n': {
+              builder: '@angular-devkit/build-angular:extract-i18n',
+            },
+          },
+        },
+        'demo-e2e': {
+          architect: {
+            e2e: {},
+            lint: {
+              builder: '@angular-devkit/build-angular:tslint',
+            },
+          },
+        },
+      },
+    }));
+    schematicRunner =
+        new SchematicTestRunner('@angular/bazel', require.resolve('../collection.json'));
+  });
+
+  it('throws if package.json is not found', () => {
+    expect(host.files).toContain('/package.json');
+    host.delete('/package.json');
+    expect(() => schematicRunner.runSchematic('ng-add', defaultOptions))
+        .toThrowError('Could not find package.json');
+  });
+
+  it('throws if angular.json is not found', () => {
+    expect(host.files).toContain('/angular.json');
+    host.delete('/angular.json');
+    expect(() => schematicRunner.runSchematic('ng-add', defaultOptions, host))
+        .toThrowError('Could not find angular.json');
+  });
+
+  it('should add @angular/bazel to package.json dependencies', () => {
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const {files} = host;
+    expect(files).toContain('/package.json');
+    const content = host.readContent('/package.json');
+    expect(() => JSON.parse(content)).not.toThrow();
+    const json = JSON.parse(content);
+    const core = '@angular/core';
+    const bazel = '@angular/bazel';
+    expect(Object.keys(json)).toContain('dependencies');
+    expect(Object.keys(json)).toContain('devDependencies');
+    expect(Object.keys(json.dependencies)).toContain(core);
+    expect(Object.keys(json.devDependencies)).toContain(bazel);
+    expect(json.dependencies[core]).toBe(json.devDependencies[bazel]);
+  });
+
+  it('should add @bazel/* dev dependencies', () => {
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const content = host.readContent('/package.json');
+    const json = JSON.parse(content);
+    const devDeps = Object.keys(json.devDependencies);
+    expect(devDeps).toContain('@bazel/bazel');
+    expect(devDeps).toContain('@bazel/ibazel');
+    expect(devDeps).toContain('@bazel/karma');
+    expect(devDeps).toContain('@bazel/typescript');
+  });
+
+  it('should create Bazel workspace file', () => {
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const {files} = host;
+    expect(files).toContain('/WORKSPACE');
+    expect(files).toContain('/BUILD.bazel');
+  });
+
+  it('should produce main.dev.ts and main.prod.ts for AOT', () => {
+    host.create('/src/main.ts', 'generated by CLI');
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const {files} = host;
+    // main.dev.ts and main.prod.ts are used by Bazel for AOT
+    expect(files).toContain('/src/main.dev.ts');
+    expect(files).toContain('/src/main.prod.ts');
+    // main.ts is produced by original ng-add schematics
+    // This file should be present for backwards compatibility.
+    expect(files).toContain('/src/main.ts');
+  });
+
+  it('should not overwrite index.html with script tags', () => {
+    host.create('/src/index.html', '<html>Hello World</html>');
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const {files} = host;
+    expect(files).toContain('/src/index.html');
+    const content = host.readContent('/src/index.html');
+    expect(content).not.toMatch('<script src="/zone.min.js"></script>');
+    expect(content).not.toMatch('<script src="/bundle.min.js"></script>');
+  });
+
+  it('should generate main.dev.ts and main.prod.ts', () => {
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const {files} = host;
+    expect(files).toContain('/src/main.dev.ts');
+    expect(files).toContain('/src/main.prod.ts');
+  });
+
+  it('should overwrite .gitignore for bazel-out directory', () => {
+    host.create('.gitignore', '\n# compiled output\n');
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const {files} = host;
+    expect(files).toContain('/.gitignore');
+    const content = host.readContent('/.gitignore');
+    expect(content).toMatch('\n# compiled output\n/bazel-out\n');
+  });
+
+  it('should create a backup for original angular.json', () => {
+    expect(host.files).toContain('/angular.json');
+    const original = host.readContent('/angular.json');
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    expect(host.files).toContain('/angular.json.bak');
+    const content = host.readContent('/angular.json.bak');
+    expect(content.startsWith('// This is a backup file')).toBe(true);
+    expect(content).toMatch(original);
+  });
+
+  it('should update angular.json to use Bazel builder', () => {
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const {files} = host;
+    expect(files).toContain('/angular.json');
+    const content = host.readContent('/angular.json');
+    expect(() => JSON.parse(content)).not.toThrow();
+    const json = JSON.parse(content);
+    const demo = json.projects.demo;
+    const demo_e2e = json.projects['demo-e2e'];
+    const {build, serve, test} = demo.architect;
+    expect(build.builder).toBe('@angular/bazel:build');
+    expect(serve.builder).toBe('@angular/bazel:build');
+    expect(test.builder).toBe('@angular/bazel:build');
+    const {e2e, lint} = demo_e2e.architect;
+    expect(e2e.builder).toBe('@angular/bazel:build');
+    // it should leave non-Bazel commands unmodified
+    expect(demo.architect['extract-i18n'].builder)
+        .toBe('@angular-devkit/build-angular:extract-i18n');
+    expect(lint.builder).toBe('@angular-devkit/build-angular:tslint');
+  });
+});

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

@@ -0,0 +1,13 @@
+
+// THIS FILE IS AUTOMATICALLY GENERATED. TO UPDATE THIS FILE YOU NEED TO CHANGE
+// THE CORRESPONDING JSON SCHEMA FILE. See README.md.
+
+// tslint:disable:no-global-tslint-disable
+// tslint:disable
+
+export interface Schema {
+  /**
+   * The name of the project.
+   */
+  name: string;
+}

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "SchematicsAngularBazelNgAdd",
+  "title": "Angular Bazel Ng Add Schema",
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the project.",
+      "type": "string",
+      "format": "html-selector",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    }
+  },
+  "required": [
+    "name"
+  ]
+}