From 2540b824622137cc30260a8c37428ad0f28bf196 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Tue, 27 Nov 2018 22:05:33 +0100
Subject: [PATCH] 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.
---
 src/dev-app/BUILD.bazel              |  2 +-
 src/dev-app/system-config.ts         |  8 +++-----
 src/dev-app/system-rxjs-operators.ts | 26 ++++++++++++++++++++++++++
 src/dev-app/tsconfig-build.json      |  1 +
 4 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 src/dev-app/system-rxjs-operators.ts

diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index 8dca57b42f7..d79c747c19d 100644
--- a/src/dev-app/BUILD.bazel
+++ b/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",
diff --git a/src/dev-app/system-config.ts b/src/dev-app/system-config.ts
index c94aaf03bca..b9329312b18 100644
--- a/src/dev-app/system-config.ts
+++ b/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.
     '.': {
diff --git a/src/dev-app/system-rxjs-operators.ts b/src/dev-app/system-rxjs-operators.ts
new file mode 100644
index 00000000000..889d87f932e
--- /dev/null
+++ b/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);
+  });
+}
diff --git a/src/dev-app/tsconfig-build.json b/src/dev-app/tsconfig-build.json
index 36babb132c5..eafed58a186 100644
--- a/src/dev-app/tsconfig-build.json
+++ b/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"
   ]