refactor(dev-infra): ng_rollup_bundle rule should leverage @bazel/rollup (#37623)

Refactors the `ng_rollup_bundle` rule to a macro that relies on
the `@bazel/rollup` package. This means that the rule no longer
deals with custom ESM5 flavour output, but rather only builds
prodmode ES2015 output. This matches the common build output
in Angular projects, and optimizations done in CLI where
ES2015 is the default optimization input.

The motiviation for this change is:

* Not duplicating rollup Bazel rules. Instead leveraging the official
rollup rule.
* Not dealing with a third TS output flavor in Bazel.The ESM5 flavour has the
potential of slowing down local development (as it requires compilation replaying)
* Updating the rule to be aligned with current CLI optimizations.

This also _fixes_ a bug that surfaced in the old rollup bundle rule.
Code that is unused, is not removed properly. The new rule fixes this by
setting the `toplevel` flag. This instructs terser to remove unused
definitions at top-level. This matches the optimization applied in CLI
projects. Notably the CLI doesn't need this flag, as code is always
wrapped by Webpack. Hence, the unused code eliding runs by default.

PR Close #37623

packages/bazel/src/ng_package/rollup.config.js

@@ -146,6 +146,8 @@ if (bannerFile) {
   }
 }
 
+// Transform that is enabled for UMD bundle processing. It transforms existing ES2015
+// prodmode output to ESM5 so that the resulting UMD bundles are using ES5 format.
 const downlevelToEs5Plugin = {
   name: 'downlevel-to-es5',
   transform: (code, filePath) => {
@@ -158,7 +160,6 @@ const downlevelToEs5Plugin = {
       importHelpers: true,
       mapRoot: path.dirname(filePath),
     };
-
     const {outputText, sourceMapText} = ts.transpileModule(code, {compilerOptions});
     return {
       code: outputText,
@@ -181,6 +182,7 @@ const plugins = [
   sourcemaps(),
 ];
 
+// If downleveling to ES5 is enabled, set up the downlevel rollup plugin.
 if (downlevelToEs5) {
   plugins.push(downlevelToEs5Plugin);
 }

packages/bazel/test/ng_package/example-with-ts-library/package.json

@@ -1,13 +1,5 @@
 {
-  "name": "example",
+  "name": "example-with-ts-library",
   "version": "0.0.0-PLACEHOLDER",
-  "main": "./bundles/example.umd.js",
-  "fesm5": "./fesm5/example.js",
-  "fesm2015": "./fesm2015/example.js",
-  "esm5": "./esm5/index.js",
-  "esm2015": "./esm2015/index.js",
-  "typings": "./index.d.ts",
-  "module": "./fesm5/example.js",
-  "es2015": "./fesm2015/example.js",
   "schematics": "Custom property that should be preserved."
 }

packages/bazel/test/ng_package/example-with-ts-library/portal/BUILD.bazel

@@ -6,7 +6,7 @@ ng_module(
     name = "portal",
     srcs = glob(["*.ts"]),
     bundle_dts = False,
-    module_name = "example/portal",
+    module_name = "example-with-ts-library/portal",
     deps = [
         "//packages/core",
         "@npm//@types",

packages/bazel/test/ng_package/example-with-ts-library/utils/BUILD.bazel

@@ -5,5 +5,5 @@ package(default_visibility = ["//packages/bazel/test:__subpackages__"])
 ts_library(
     name = "utils",
     srcs = glob(["*.ts"]),
-    module_name = "example/utils",
+    module_name = "example-with-ts-library/utils",
 )

packages/bazel/test/ng_package/example_with_ts_library_package.golden

@@ -46,9 +46,6 @@ utils
   utils/package.json
   utils/testing.d.ts
 utils.d.ts
-with-ts-library
-  with-ts-library/package.json
-with-ts-library.d.ts
 --- README.md ---
 
 Angular
@@ -71,8 +68,8 @@ License: MIT
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
-    typeof define === 'function' && define.amd ? define('example/portal', ['exports', '@angular/core'], factory) :
-    (global = global || self, factory((global.example = global.example || {}, global.example.portal = {}), global.ng.core));
+    typeof define === 'function' && define.amd ? define('example-with-ts-library/portal', ['exports', '@angular/core'], factory) :
+    (global = global || self, factory((global.exampleWithTsLibrary = global.exampleWithTsLibrary || {}, global.exampleWithTsLibrary.portal = {}), global.ng.core));
 }(this, (function (exports, core) { 'use strict';
 
     /**
@@ -120,14 +117,14 @@ License: MIT
  * (c) 2010-2020 Google LLC. https://angular.io/
  * License: MIT
  */
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("example/portal",["exports","@angular/core"],o):o(((e=e||self).example=e.example||{},e.example.portal={}),e.ng.core)}(this,(function(e,o){"use strict";
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("example-with-ts-library/portal",["exports","@angular/core"],r):r(((e=e||self).exampleWithTsLibrary=e.exampleWithTsLibrary||{},e.exampleWithTsLibrary.portal={}),e.ng.core)}(this,(function(e,r){"use strict";
 /**
      * @license
      * Copyright Google LLC 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
-     */var t;(t=function t(){}).decorators=[{type:o.NgModule,args:[{}]}],
+     */var t;(t=function t(){}).decorators=[{type:r.NgModule,args:[{}]}],
 /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -147,8 +144,8 @@ e.PortalModule=t,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})}));
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define('example/utils', ['exports'], factory) :
-    (global = global || self, factory((global.example = global.example || {}, global.example.utils = {})));
+    typeof define === 'function' && define.amd ? define('example-with-ts-library/utils', ['exports'], factory) :
+    (global = global || self, factory((global.exampleWithTsLibrary = global.exampleWithTsLibrary || {}, global.exampleWithTsLibrary.utils = {})));
 }(this, (function (exports) { 'use strict';
 
     /**
@@ -185,7 +182,7 @@ e.PortalModule=t,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})}));
  * (c) 2010-2020 Google LLC. https://angular.io/
  * License: MIT
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define("example/utils",["exports"],t):t(((e=e||self).example=e.example||{},e.example.utils={}))}(this,(function(e){"use strict";
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define("example-with-ts-library/utils",["exports"],t):t(((e=e||self).exampleWithTsLibrary=e.exampleWithTsLibrary||{},e.exampleWithTsLibrary.utils={}))}(this,(function(e){"use strict";
 /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -200,7 +197,7 @@ e.PortalModule=t,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})}));
      * 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
      */
-e.dispatchFakeEvent=function t(e,n){e.dispatchEvent(n)},Object.defineProperty(e,"__esModule",{value:!0})}));
+e.dispatchFakeEvent=function t(e,i){e.dispatchEvent(i)},Object.defineProperty(e,"__esModule",{value:!0})}));
 
 --- bundles/example-with-ts-library.umd.js ---
 
@@ -450,17 +447,15 @@ export declare const VERSION = "0.0.0";
 --- package.json ---
 
 {
-  "name": "example",
+  "name": "example-with-ts-library",
   "version": "0.0.0",
-  "main": "./bundles/example.umd.js",
-  "fesm5": "./fesm5/example.js",
-  "fesm2015": "./fesm2015/example.js",
-  "esm5": "./esm5/index.js",
+  "schematics": "Custom property that should be preserved.",
+  "main": "./bundles/example-with-ts-library.umd.js",
+  "fesm2015": "./fesm2015/example-with-ts-library.js",
   "esm2015": "./esm2015/index.js",
   "typings": "./index.d.ts",
-  "module": "./fesm5/example.js",
-  "es2015": "./fesm2015/example.js",
-  "schematics": "Custom property that should be preserved."
+  "module": "./fesm2015/example-with-ts-library.js",
+  "es2015": "./fesm2015/example-with-ts-library.js"
 }
 
 --- portal/index.d.ts ---
@@ -478,8 +473,8 @@ export * from './portal-module';
 --- portal/package.json ---
 
 {
-  "name": "example/portal",
-  "main": "../bundles/example-portal.umd.js",
+  "name": "example-with-ts-library/portal",
+  "main": "../bundles/example-with-ts-library-portal.umd.js",
   "fesm2015": "../fesm2015/portal.js",
   "esm2015": "../esm2015/portal/portal.js",
   "typings": "./portal.d.ts",
@@ -511,7 +506,7 @@ export * from './index';
 
 --- portal/portal.metadata.json ---
 
-{"__symbolic":"module","version":4,"metadata":{"PortalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{}]}],"members":{}},"a":1},"origins":{"PortalModule":"./portal-module","a":"./portal-module"},"importAs":"example/portal"}
+{"__symbolic":"module","version":4,"metadata":{"PortalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{}]}],"members":{}},"a":1},"origins":{"PortalModule":"./portal-module","a":"./portal-module"},"importAs":"example-with-ts-library/portal"}
 
 --- portal.d.ts ---
 
@@ -526,7 +521,7 @@ export * from './portal/portal';
 
 --- portal.metadata.json ---
 
-{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./portal/portal"}],"flatModuleIndexRedirect":true,"importAs":"example/portal"}
+{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./portal/portal"}],"flatModuleIndexRedirect":true,"importAs":"example-with-ts-library/portal"}
 
 
 --- utils/index.d.ts ---
@@ -544,8 +539,8 @@ export * from './testing';
 --- utils/package.json ---
 
 {
-  "name": "example/utils",
-  "main": "../bundles/example-utils.umd.js",
+  "name": "example-with-ts-library/utils",
+  "main": "../bundles/example-with-ts-library-utils.umd.js",
   "fesm2015": "../fesm2015/utils.js",
   "esm2015": "../esm2015/utils/index.js",
   "typings": "./index.d.ts",
@@ -575,26 +570,3 @@ export declare function dispatchFakeEvent(el: HTMLElement, ev: Event): void;
 
 export * from './utils/index';
 
-
---- with-ts-library/package.json ---
-
-{
-  "name": "example-with-ts-library",
-  "main": "./bundles/example-with-ts-library.umd.js",
-  "fesm2015": "./fesm2015/example-with-ts-library.js",
-  "esm2015": "../esm2015/index.js",
-  "typings": "../index.d.ts",
-  "module": "./fesm2015/example-with-ts-library.js",
-  "es2015": "./fesm2015/example-with-ts-library.js"
-}
-
---- with-ts-library.d.ts ---
-
-/**
- * @license Angular v0.0.0
- * (c) 2010-2020 Google LLC. https://angular.io/
- * License: MIT
- */
-
-export * from './index';
-

packages/core/test/render3/perf/README.md

@@ -1,19 +1,19 @@
 ### Build
 
 ```
-yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}_lib.min_debug.es2015.js --config=ivy
+yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}_lib.min_debug.js --config=ivy
 ```
 
 ### Run 
 
 ```
-node dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.es2015.js
+node dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.js
 ```
 
 ### Profile
 
 ```
-node --no-turbo-inlining --inspect-brk dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.es2015.js
+node --no-turbo-inlining --inspect-brk dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.js
 ```
 
 then connect with a debugger (the `--inspect-brk` option will make sure that benchmark execution doesn't start until a debugger is connected and the code execution is manually resumed). 
@@ -24,7 +24,7 @@ The actual benchmark code has calls that will start (`console.profile`) and stop
 
 ```
 yarn add deoptigate
-yarn deoptigate dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.es2015.js
+yarn deoptigate dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.js
 ```
 
 ### Run All
@@ -83,4 +83,4 @@ To debug
 - Follow the directions in `profile_in_browser.html`
 OR
 - `yarn bazel build --config=ivy //packages/core/test/render3/perf:noop_change_detection`
-- `node --inspect-brk bazel-out/darwin-fastbuild/bin/packages/core/test/render3/perf/noop_change_detection.min_debug.es2015.js`
+- `node --inspect-brk bazel-out/darwin-fastbuild/bin/packages/core/test/render3/perf/noop_change_detection.min_debug.js`

packages/core/test/render3/perf/profile_all.js

@@ -30,7 +30,7 @@ const profileTests =
 // build tests
 shell.exec(
     `yarn bazel build --config=ivy ` +
-    profileTests.map((name) => `//packages/core/test/render3/perf:${name}_lib.min_debug.es2015.js`)
+    profileTests.map((name) => `//packages/core/test/render3/perf:${name}_lib.min_debug.js`)
         .join(' '));
 
 // profile tests
@@ -60,8 +60,7 @@ if (readPath) {
 profileTests.forEach((name) => {
   // tslint:disable-next-line:no-console
   console.log('----------------', name, '----------------');
-  const log =
-      shell.exec(`node dist/bin/packages/core/test/render3/perf/${name}_lib.min_debug.es2015.js`);
+  const log = shell.exec(`node dist/bin/packages/core/test/render3/perf/${name}_lib.min_debug.js`);
   if (log.code != 0) throw new Error(log);
   const matches = log.stdout.match(/: ([\d\.]+) (.s)/);
   const runTime = times[name] || (times[name] = {name: name});

packages/core/test/render3/perf/profile_in_browser.html

@@ -2,11 +2,11 @@
   <script>
    let BASE = location.toString().split('packages/core/test/render3/perf')[0]
    let BENCHMARK = location.search.split('=')[1];
-   document.writeln('<' + 'script src="' + BASE + '/dist/bin/packages/core/test/render3/perf/' + BENCHMARK + '.min_debug.es2015.js"></' + 'script>');
+   document.writeln('<' + 'script src="' + BASE + '/dist/bin/packages/core/test/render3/perf/' + BENCHMARK + '.min_debug.js"></' + 'script>');
   </script>
   <body>
     <ol>
-      <li>Build the benchmark using <tt>yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}.min_debug.es2015.js --config=ivy</tt></li>
+      <li>Build the benchmark using <tt>yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}.min_debug.js --config=ivy</tt></li>
       <li>Open this file using the <tt>file://</tt> protocol and add <tt>?benchmark=BENCHMARK</tt> to the URL.</li>
       <li>
         Note: You should likely run this in an incognito browser with the "no-turbo-inlining" flag.<br />

packages/language-service/bundles/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//dev-infra/benchmark/ng_rollup_bundle:ng_rollup_bundle.bzl", "ls_rollup_bundle")
+load("//packages/language-service/bundles:index.bzl", "ls_rollup_bundle")
 
 ls_rollup_bundle(
     name = "language-service",

packages/language-service/bundles/index.bzl

@@ -0,0 +1,25 @@
+load("//dev-infra/benchmark/ng_rollup_bundle:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+
+def ls_rollup_bundle(name, **kwargs):
+    """
+        A variant of ng_rollup_bundle for the language-service bundle that
+        outputs in AMD format.
+    """
+    visibility = kwargs.pop("visibility", None)
+
+    # Note: the output file is called "umd.js" because of historical reasons.
+    # The format is actually AMD and not UMD, but we are afraid to rename
+    # the file because that would likely break the IDE and other integrations that
+    # have the path hardcoded in them.
+    ng_rollup_bundle(
+        name = name + ".umd",
+        build_optimizer = False,
+        format = "amd",
+        visibility = visibility,
+        **kwargs
+    )
+    native.alias(
+        name = name,
+        actual = name + ".umd",
+        visibility = visibility,
+    )

packages/service-worker/BUILD.bazel

@@ -26,7 +26,7 @@ genrule(
 
 genrule(
     name = "ngsw_worker_renamed",
-    srcs = ["//packages/service-worker/worker:ngsw_worker.es2015.js"],
+    srcs = ["//packages/service-worker/worker:ngsw_worker.js"],
     outs = ["ngsw-worker.js"],
     # Remove sourcemap since this file will be served in production site
     # See https://github.com/angular/angular/issues/23596