feat(bazel): update bazel-schematics to use Ivy and new rollup_bundle (#33435)

Note: the @angular/bazel schematic now appends the package.json "script" field with 'ngcc --properties es2015 browser module main'. If there is an existing script field with ngcc then the schematic modifies it in place removing `--first-only` and `--create-ivy-entry-points`.

ViewEngine sources under node_modules need to be updated in-place for Bazel as it does not know how to use the `__ivy__` entry points that are created by the non-bazel `ngcc` command that is added to "scripts" :`ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points`.

PR Close #33435

packages/bazel/src/builders/files/__dot__bazelrc.template

@@ -27,8 +27,9 @@ build --incompatible_bzl_disallow_load_after_statement=false
 
 test --test_output=errors
 
-# Use the Angular 6 compiler
-build --define=compile=legacy
+# Use the Angular Ivy compiler
+# See https://github.com/angular/angular/blob/master/docs/BAZEL.md#various-flags-used-for-tests
+build --define=compile=aot
 
 # Temporary define while angular depends on the legacy rollup_bundle rule.
 # TODO: remove this setting after https://github.com/angular/angular/pull/33201 lands.

packages/bazel/src/builders/files/src/BUILD.bazel.template

@@ -2,9 +2,10 @@ package(default_visibility = ["//visibility:public"])
 
 load("@npm_angular_bazel//:index.bzl", "ng_module")
 load("@npm_bazel_karma//:index.bzl", "ts_web_test_suite")
-load("@build_bazel_rules_nodejs//:index.bzl", "rollup_bundle")
 load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
 load("@npm//history-server:index.bzl", "history_server")
+load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
+load("@npm_bazel_terser//:index.bzl", "terser_minified")
 load("@npm_bazel_typescript//:index.bzl", "ts_devserver", "ts_library")
 load("@io_bazel_rules_sass//:defs.bzl", "multi_sass_binary", "sass_binary")
 
@@ -48,21 +49,26 @@ ng_module(
 
 rollup_bundle(
     name = "bundle",
-    enable_code_splitting = False,
+    config_file = "rollup.config.js",
     entry_point = ":main.prod.ts",
     deps = [
         "//src",
-        "@npm//@angular/router",
-        "@npm//rxjs",
+        "@npm//rollup-plugin-commonjs",
+        "@npm//rollup-plugin-node-resolve",
     ],
 )
 
+terser_minified(
+    name = "bundle.min",
+    src = ":bundle",
+)
+
 web_package(
     name = "prodapp",
     assets = [
         # do not sort
         "@npm//:node_modules/zone.js/dist/zone.min.js",
-        ":bundle.min.js",
+        ":bundle.min",
         ":global_stylesheet",
     ],
     data = [

packages/bazel/src/schematics/ng-add/files/angular-metadata.tsconfig.json.template

@@ -1,29 +0,0 @@
-// Workaround for https://github.com/angular/angular/issues/18810
-// This file is required because when using the Angular NPM packages and building
-// with AOT compilation, NGC needs the "ngsummary.json" files.
-{
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "es2015"
-    ],
-    "experimentalDecorators": true,
-    "types": [],
-    "module": "amd",
-    "moduleResolution": "node"
-  },
-  "angularCompilerOptions": {
-    "enableIvy": false
-  },
-  "include": [
-    "node_modules/@angular/**/*"
-  ],
-  "exclude": [
-    "node_modules/@angular/bazel/**",
-    "node_modules/@angular/**/schematics/**",
-    "node_modules/@angular/**/testing/**",
-    "node_modules/@angular/compiler-cli/**",
-    "node_modules/@angular/common/upgrade*",
-    "node_modules/@angular/router/upgrade*"
-  ]
-}

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

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

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

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

packages/bazel/src/schematics/ng-add/files/src/rollup.config.js.template

@@ -0,0 +1,11 @@
+const node = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+
+module.exports = {
+  plugins: [
+    node({
+      mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'],
+    }),
+    commonjs(),
+  ],
+};

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

@@ -52,8 +52,14 @@ function addDevDependenciesToPackageJson(options: Schema) {
       '@bazel/ibazel': '^0.10.2',
       '@bazel/karma': '0.39.0',
       '@bazel/protractor': '0.39.0',
+      '@bazel/rollup': '0.39.0',
+      '@bazel/terser': '0.39.0',
       '@bazel/typescript': '0.39.0',
       'history-server': '^1.3.1',
+      'rollup': '^1.25.2',
+      'rollup-plugin-commonjs': '^10.1.0',
+      'rollup-plugin-node-resolve': '^5.2.0',
+      'terser': '^4.3.9',
     };
 
     const recorder = host.beginUpdate(packageJson);
@@ -310,15 +316,11 @@ function upgradeRxjs() {
 }
 
 /**
- * When using Angular NPM packages and building with AOT compilation, ngc
- * requires ngsumamry files but they are not shipped. This function adds a
- * postinstall step to generate these files.
+ * When using Ivy, ngcc must be run as a postinstall step.
+ * This function adds this postinstall step.
  */
-function addPostinstallToGenerateNgSummaries() {
+function addPostinstallToRunNgcc() {
   return (host: Tree, context: SchematicContext) => {
-    if (!host.exists('angular-metadata.tsconfig.json')) {
-      return;
-    }
     const packageJson = 'package.json';
     if (!host.exists(packageJson)) {
       throw new Error(`Could not find ${packageJson}`);
@@ -333,19 +335,29 @@ function addPostinstallToGenerateNgSummaries() {
     }
     const scripts = findPropertyInAstObject(jsonAst, 'scripts') as JsonAstObject;
     const recorder = host.beginUpdate(packageJson);
-    const ngcCommand = 'ngc -p ./angular-metadata.tsconfig.json';
+    // For bazel we need to compile the all files in place so we
+    // don't use `--first-only` or `--create-ivy-entry-points`
+    const ngccCommand = 'ngcc --properties es2015 browser module main';
     if (scripts) {
       const postInstall = findPropertyInAstObject(scripts, 'postinstall');
-      if (postInstall) {
-        const command = `${postInstall.value}; ${ngcCommand}`;
-        replacePropertyInAstObject(recorder, scripts, 'postinstall', command);
+      if (postInstall && postInstall.value) {
+        let value = postInstall.value as string;
+        if (/\bngcc\b/.test(value)) {
+          // `ngcc` is already in the postinstall script
+          value =
+              value.replace(/\s*--first-only\b/, '').replace(/\s*--create-ivy-entry-points\b/, '');
+          replacePropertyInAstObject(recorder, scripts, 'postinstall', value);
+        } else {
+          const command = `${postInstall.value}; ${ngccCommand}`;
+          replacePropertyInAstObject(recorder, scripts, 'postinstall', command);
+        }
       } else {
-        insertPropertyInAstObjectInOrder(recorder, scripts, 'postinstall', ngcCommand, 4);
+        insertPropertyInAstObjectInOrder(recorder, scripts, 'postinstall', ngccCommand, 4);
       }
     } else {
       insertPropertyInAstObjectInOrder(
           recorder, jsonAst, 'scripts', {
-            postinstall: ngcCommand,
+            postinstall: ngccCommand,
           },
           2);
     }
@@ -377,7 +389,7 @@ export default function(options: Schema): Rule {
       addFilesRequiredByBazel(options),
       addDevDependenciesToPackageJson(options),
       removeObsoleteDependenciesFromPackageJson(options),
-      addPostinstallToGenerateNgSummaries(),
+      addPostinstallToRunNgcc(),
       backupAngularJson(),
       updateAngularJsonToUseBazelBuilder(options),
       updateGitignore(),

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

@@ -165,7 +165,20 @@ describe('ng-add schematic', () => {
     const content = host.readContent('/package.json');
     const json = JSON.parse(content);
     expect(json.scripts['postinstall'])
-        .toBe('angular rocks; ngc -p ./angular-metadata.tsconfig.json');
+        .toBe('angular rocks; ngcc --properties es2015 browser module main');
+  });
+
+  it('should update ngcc in scripts.postinstall if it already exists', async() => {
+    const packageJson = JSON.parse(host.readContent('/package.json'));
+    packageJson['scripts'] = {
+      postinstall:
+          'ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points',
+    };
+    host.overwrite('/package.json', JSON.stringify(packageJson));
+    host = await schematicRunner.runSchematicAsync('ng-add', defaultOptions, host).toPromise();
+    const content = host.readContent('/package.json');
+    const json = JSON.parse(content);
+    expect(json.scripts['postinstall']).toBe('ngcc --properties es2015 browser module main');
   });
 
   it('should not create Bazel workspace file', async() => {
@@ -298,7 +311,7 @@ describe('ng-add schematic', () => {
     expect(host.files).toContain('/package.json');
     const content = host.readContent('/package.json');
     const json = JSON.parse(content);
-    expect(json.scripts.postinstall).toBe('ngc -p ./angular-metadata.tsconfig.json');
+    expect(json.scripts.postinstall).toBe('ngcc --properties es2015 browser module main');
   });
 
   it('should work when run on a minimal project (without test and e2e targets)', async() => {