build: no longer load rxjs files individually (#14237)

* No longer loads all rxjs files individually when serving the dev-app. Now uses the UMD bundle which should speed up the initial loading of the dev-app with Gulp.

Author: devversion

src/dev-app/BUILD.bazel

@@ -13,7 +13,7 @@ sass_generate_binaries("dev_app_scss", glob(["**/*.scss"], exclude = ["theme.scs
 
 ng_module(
   name = "dev-app",
-  srcs = glob(["**/*.ts"], exclude = ["system-config.ts"]),
+  srcs = glob(["**/*.ts"], exclude = ["system-config.ts", "system-rxjs-operators.ts"]),
   assets = glob(["**/*.html"]) + [":dev_app_scss", ":theme"],
   deps = [
     "@angular//packages/common",

src/dev-app/system-config.ts

@@ -15,11 +15,13 @@ System.config({
     'node:*': 'node_modules/*'
   },
   map: {
-    'rxjs': 'node:rxjs',
     'main': 'main.js',
     'tslib': 'node:tslib/tslib.js',
     'moment': 'node:moment/min/moment-with-locales.min.js',
 
+    'rxjs': 'node_modules/rxjs/bundles/rxjs.umd.min.js',
+    'rxjs/operators': 'system-rxjs-operators.js',
+
     // Angular specific mappings.
     '@angular/core': 'node:@angular/core/bundles/core.umd.js',
     '@angular/common': 'node:@angular/common/bundles/common.umd.js',
@@ -102,10 +104,6 @@ System.config({
     '@angular/material/tree': 'dist/packages/material/tree/index.js',
   },
   packages: {
-    // Thirdparty barrels.
-    'rxjs': {main: 'index'},
-    'rxjs/operators': {main: 'index'},
-
     // Set the default extension for the root package, because otherwise the dev-app can't
     // be built within the production mode. Due to missing file extensions.
     '.': {

src/dev-app/system-rxjs-operators.ts

@@ -0,0 +1,26 @@
+/**
+ * @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
+ */
+
+
+// Workaround for an issue where RxJS cannot be used with UMD bundles only. This is because
+// rxjs only ships one UMD bundle and expects everyone to only use the named "rxjs" AMD module.
+// Since our code internally loads operators from "rxjs/operators/index", we need to make sure
+// that we re-export all operators from the UMD module. This is a small trade-off for not loading
+// all rxjs files individually.
+
+declare const define: {
+  (deps: string[], factory: (...deps: any[]) => void): void;
+  amd: boolean;
+};
+
+if (typeof define === 'function' && define.amd) {
+  define(['exports', 'rxjs'], (exports: any, rxjs: any) => {
+    // Re-export all operators in this AMD module.
+    Object.assign(exports, rxjs.operators);
+  });
+}

src/dev-app/tsconfig-build.json

@@ -41,6 +41,7 @@
   "files": [
     "./typings.d.ts",
     "./dev-app-module.ts",
+    "./system-rxjs-operators.ts",
     "./system-config.ts",
     "./main.ts"
   ]