build(bazel): do not build rxjs from source under Bazel (#28869)

PR Close #28869

integration/bazel/WORKSPACE

@@ -24,15 +24,6 @@ local_repository(
     path = "../..",
 )
 
-# Fetch the rxjs repository since we build rxjs from source
-# TODO(gregmagolan): use rxjs bundles in the Bazel build
-http_archive(
-    name = "rxjs",
-    sha256 = "72b0b4e517f43358f554c125e40e39f67688cd2738a8998b4a266981ed32f403",
-    strip_prefix = "package/src",
-    url = "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz",
-)
-
 # Check the bazel version and download npm dependencies
 load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
 

integration/bazel/src/BUILD.bazel

@@ -1,6 +1,9 @@
 package(default_visibility = ["//visibility:public"])
 
 load("@angular//:index.bzl", "ng_module")
+load("@build_bazel_rules_nodejs//:defs.bzl", "http_server", "nodejs_binary", "rollup_bundle")
+load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
 
 # Allow targets under sub-packages to reference the tsconfig.json file
 exports_files(["tsconfig.json"])
@@ -14,40 +17,38 @@ ng_module(
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//@types",
+        "@npm//rxjs",
     ],
 )
 
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+filegroup(
+    name = "rxjs_umd_modules",
+    srcs = [
+        # do not sort
+        "@npm//node_modules/rxjs:bundles/rxjs.umd.js",
+        ":rxjs_shims.js",
+    ],
+)
 
 ts_devserver(
     name = "devserver",
-    additional_root_paths = [
-        "npm/node_modules/tslib",
-        "npm/node_modules/zone.js/dist",
-    ],
     entry_module = "bazel_integration_test/src/main",
+    index_html = "index.html",
     scripts = [
         "@npm//node_modules/@angular/common:bundles/common.umd.js",
         "@npm//node_modules/@angular/common:bundles/common-http.umd.js",
         "@npm//node_modules/@angular/core:bundles/core.umd.js",
         "@npm//node_modules/@angular/platform-browser:bundles/platform-browser.umd.js",
+        "@npm//node_modules/tslib:tslib.js",
+        ":rxjs_umd_modules",
     ],
     serving_path = "/bundle.min.js",
     static_files = [
-        "@npm//node_modules/tslib:tslib.js",
         "@npm//node_modules/zone.js:dist/zone.min.js",
-        "index.html",
-    ],
-    deps = [
-        "//src",
-        # This will be removed with https://github.com/angular/angular/pull/28720. This is the
-        # only remaining dependency that we still build from source here.
-        "@rxjs",
     ],
+    deps = ["//src"],
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary", "rollup_bundle")
-
 rollup_bundle(
     name = "bundle",
     entry_point = "src/main",
@@ -56,25 +57,25 @@ rollup_bundle(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
+        "@npm//rxjs",
     ],
 )
 
-# Needed because the prodserver only loads static files that appear under this
-# package.
-genrule(
-    name = "zone.js",
-    srcs = ["@npm//node_modules/zone.js:dist/zone.min.js"],
-    outs = ["zone.min.js"],
-    cmd = "cp $< $@",
+web_package(
+    name = "prodapp",
+    assets = [
+        # do not sort
+        "@npm//node_modules/zone.js:dist/zone.min.js",
+        ":bundle.min.js",
+    ],
+    data = [
+        ":bundle",
+    ],
+    index_html = "index.html",
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "http_server")
-
 http_server(
     name = "prodserver",
-    data = [
-        "index.html",
-        ":bundle",
-        ":zone.js",
-    ],
+    data = [":prodapp"],
+    templated_args = ["src/prodapp"],
 )

integration/bazel/src/hello-world/BUILD.bazel

@@ -69,8 +69,6 @@ ts_web_test_suite(
     ],
     deps = [
         ":test_lib",
-        # This will be removed with https://github.com/angular/angular/pull/28720. This is the
-        # only remaining dependency that we still build from source here.
-        "@rxjs",
+        "//src:rxjs_umd_modules",
     ],
 )

integration/bazel/src/index.html

@@ -3,10 +3,11 @@
 <html>
   <head>
     <title>Bazel Integration Test</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
+    <!-- The Angular application will be bootstrapped into this element. -->
     <app-component></app-component>
-    <script src="/zone.min.js"></script>
-    <script src="/bundle.min.js"></script>
   </body>
 </html>

integration/bazel/src/package.json

@@ -10,7 +10,7 @@
     "@angular/platform-browser": "file:../angular/dist/packages-dist/platform-browser",
     "@angular/platform-browser-dynamic": "file:../angular/dist/packages-dist/platform-browser-dynamic",
     "reflect-metadata": "0.1.12",
-    "rxjs": "6.3.3",
+    "rxjs": "6.4.0",
     "tslib": "1.9.3",
     "zone.js": "0.8.26"
   },

integration/bazel/src/rxjs_shims.js

@@ -0,0 +1,35 @@
+/**
+ * @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
+ */
+
+// rxjs/operators
+(function(factory) {
+  if (typeof module === 'object' && typeof module.exports === 'object') {
+    var v = factory(require, exports);
+    if (v !== undefined) module.exports = v;
+  } else if (typeof define === 'function' && define.amd) {
+    define('rxjs/operators', ['exports', 'rxjs'], factory);
+  }
+})(function(exports, rxjs) {
+  'use strict';
+  Object.keys(rxjs.operators).forEach(function(key) { exports[key] = rxjs.operators[key]; });
+  Object.defineProperty(exports, '__esModule', {value: true});
+});
+
+// rxjs/testing
+(function(factory) {
+  if (typeof module === 'object' && typeof module.exports === 'object') {
+    var v = factory(require, exports);
+    if (v !== undefined) module.exports = v;
+  } else if (typeof define === 'function' && define.amd) {
+    define('rxjs/testing', ['exports', 'rxjs'], factory);
+  }
+})(function(exports, rxjs) {
+  'use strict';
+  Object.keys(rxjs.testing).forEach(function(key) { exports[key] = rxjs.testing[key]; });
+  Object.defineProperty(exports, '__esModule', {value: true});
+});