build: switch playground examples to bazel (#28490)

Currently all playground examples are built with `tsc`
and served with the `gulp serve` task. In order to be able
to test these examples easily with Ivy, we now build and
serve the examples using Bazel. This allows us to expand our
Ivy test coverage and additionally it allows us to move forward
with the overall Bazel migration. Building & serving individual
examples is now very easy and doesn't involve building everything
inside of `/modules`.

PR Close #28490

modules/playground/src/web_workers/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "worker-config",
+    srcs = ["worker-configure.js"],
+    data = [
+        "//modules/playground:systemjs-config.js",
+        "//modules/playground:systemjs-rxjs-operators.js",
+        "@ngdeps//reflect-metadata",
+        "@ngdeps//systemjs",
+        "@ngdeps//zone.js",
+    ],
+)

modules/playground/src/web_workers/animations/BUILD.bazel

@@ -0,0 +1,34 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+package(default_visibility = ["//modules/playground:__subpackages__"])
+
+ng_module(
+    name = "animations",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//modules/playground:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/animations",
+        "//packages/core",
+        "//packages/platform-webworker",
+        "//packages/platform-webworker-dynamic",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        "loader.js",
+        "//modules/playground/src/web_workers:worker-config",
+        "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
+        "@ngdeps//node_modules/tslib:tslib.js",
+    ],
+    entry_module = "angular/modules/playground/src/web_workers/animations/index",
+    index_html = "index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
+    deps = [":animations"],
+)

modules/playground/src/web_workers/animations/background_index.ts

@@ -13,9 +13,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
 import {AnimationCmp} from './index_common';
 
 @NgModule({imports: [WorkerAppModule], bootstrap: [AnimationCmp], declarations: [AnimationCmp]})
-class ExampleModule {
+export class ExampleModule {
 }
 
-export function main() {
-  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
-}
+platformWorkerAppDynamic().bootstrapModule(ExampleModule);

modules/playground/src/web_workers/animations/index.html

@@ -9,6 +9,5 @@
   </animation-app>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations-next-lite.min.js"></script>
-  <script src="../../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/web_workers/animations/index.ts

@@ -8,6 +8,4 @@
 
 import {bootstrapWorkerUi} from '@angular/platform-webworker';
 
-export function main() {
-  bootstrapWorkerUi('loader.js');
-}
+bootstrapWorkerUi('loader.js');

modules/playground/src/web_workers/animations/loader.js

@@ -6,19 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-importScripts(
-    '../../../vendor/core.js', '../../../vendor/zone.js',
-    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
-    '../../../vendor/Reflect.js');
-importScripts('../worker-systemjs-configure.js');
+importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
 
-System.import('playground/src/web_workers/animations/background_index')
-    .then(
-        function(m) {
-          try {
-            m.main();
-          } catch (e) {
-            console.error(e);
-          }
-        },
-        function(error) { console.error('error loading background', error); });
+System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
+
+System.import('./background_index.js')
+    .catch(error => console.error('error loading background', error));

modules/playground/src/web_workers/images/BUILD.bazel

@@ -0,0 +1,35 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+package(default_visibility = ["//modules/playground:__subpackages__"])
+
+ng_module(
+    name = "images",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//modules/playground:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/core",
+        "//packages/platform-webworker",
+        "//packages/platform-webworker-dynamic",
+        "@ngdeps//@types/base64-js",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        "//modules/playground/src/web_workers:worker-config",
+        "@ngdeps//node_modules/base64-js:base64js.min.js",
+        "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
+        "@ngdeps//node_modules/tslib:tslib.js",
+        "loader.js",
+    ] + glob(["**/*.css"]),
+    entry_module = "angular/modules/playground/src/web_workers/images/index",
+    index_html = "index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
+    deps = [":images"],
+)

modules/playground/src/web_workers/images/background_index.ts

@@ -13,9 +13,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
 import {ImageDemo} from './index_common';
 
 @NgModule({imports: [WorkerAppModule], bootstrap: [ImageDemo], declarations: [ImageDemo]})
-class ExampleModule {
+export class ExampleModule {
 }
 
-export function main() {
-  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
-}
+platformWorkerAppDynamic().bootstrapModule(ExampleModule);

modules/playground/src/web_workers/images/index.html

@@ -6,8 +6,6 @@
   <body>
     <image-demo>
     </image-demo>
-
-    <script src="../../bootstrap.js"></script>
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
 

modules/playground/src/web_workers/images/index.ts

@@ -8,6 +8,4 @@
 
 import {bootstrapWorkerUi} from '@angular/platform-webworker';
 
-export function main() {
-  bootstrapWorkerUi('loader.js');
-}
+bootstrapWorkerUi('loader.js');

modules/playground/src/web_workers/images/loader.js

@@ -6,19 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-importScripts(
-    '../../../vendor/core.js', '../../../vendor/zone.js',
-    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
-    '../../../vendor/Reflect.js');
-importScripts('../worker-systemjs-configure.js');
+importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
 
-System.import('playground/src/web_workers/images/background_index')
-    .then(
-        function(m) {
-          try {
-            m.main();
-          } catch (e) {
-            console.error(e);
-          }
-        },
-        function(error) { console.error('error loading background', error); });
+System.config({
+  map: {
+    'base64-js': 'ngdeps/node_modules/base64-js/base64js.min.js',
+  },
+  packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}
+});
+
+System.import('./background_index.js')
+    .catch(error => console.error('error loading background', error));

modules/playground/src/web_workers/images/services/bitmap.ts

@@ -35,7 +35,7 @@ export class BitmapService {
   toDataUri(imageData: ImageData): string {
     const header = this._createBMPHeader(imageData);
     imageData = this._imageDataToBMP(imageData);
-    return 'data:image/bmp;base64,' + btoa(header) + fromByteArray(imageData.data);
+    return 'data:image/bmp;base64,' + btoa(header) + fromByteArray(Uint8Array.from(imageData.data));
   }
 
   // converts a .bmp file ArrayBuffer to a dataURI

modules/playground/src/web_workers/input/BUILD.bazel

@@ -0,0 +1,33 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+package(default_visibility = ["//modules/playground:__subpackages__"])
+
+ng_module(
+    name = "input",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//modules/playground:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/core",
+        "//packages/platform-webworker",
+        "//packages/platform-webworker-dynamic",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        "loader.js",
+        "//modules/playground/src/web_workers:worker-config",
+        "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
+        "@ngdeps//node_modules/tslib:tslib.js",
+    ],
+    entry_module = "angular/modules/playground/src/web_workers/input/index",
+    index_html = "index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
+    deps = [":input"],
+)

modules/playground/src/web_workers/input/background_index.ts

@@ -13,9 +13,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
 import {InputCmp} from './index_common';
 
 @NgModule({imports: [WorkerAppModule], bootstrap: [InputCmp], declarations: [InputCmp]})
-class ExampleModule {
+export class ExampleModule {
 }
 
-export function main() {
-  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
-}
+platformWorkerAppDynamic().bootstrapModule(ExampleModule);

modules/playground/src/web_workers/input/index.html

@@ -7,7 +7,5 @@
   <input-app>
     Loading...
   </input-app>
-
-  <script src="../../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/web_workers/input/index.ts

@@ -8,6 +8,4 @@
 
 import {bootstrapWorkerUi} from '@angular/platform-webworker';
 
-export function main() {
-  bootstrapWorkerUi('loader.js');
-}
+bootstrapWorkerUi('loader.js');

modules/playground/src/web_workers/input/loader.js

@@ -6,19 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-importScripts(
-    '../../../vendor/core.js', '../../../vendor/zone.js',
-    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
-    '../../../vendor/Reflect.js');
-importScripts('../worker-systemjs-configure.js');
+importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
 
-System.import('playground/src/web_workers/input/background_index')
-    .then(
-        function(m) {
-          try {
-            m.main();
-          } catch (e) {
-            console.error(e);
-          }
-        },
-        function(error) { console.error('error loading background', error); });
+System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
+
+System.import('./background_index.js')
+    .catch(error => console.error('error loading background', error));

modules/playground/src/web_workers/kitchen_sink/BUILD.bazel

@@ -0,0 +1,33 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+package(default_visibility = ["//modules/playground:__subpackages__"])
+
+ng_module(
+    name = "kitchen_sink",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//modules/playground:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/core",
+        "//packages/platform-webworker",
+        "//packages/platform-webworker-dynamic",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        "loader.js",
+        "//modules/playground/src/web_workers:worker-config",
+        "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
+        "@ngdeps//node_modules/tslib:tslib.js",
+    ],
+    entry_module = "angular/modules/playground/src/web_workers/kitchen_sink/index",
+    index_html = "index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
+    deps = [":kitchen_sink"],
+)

modules/playground/src/web_workers/kitchen_sink/background_index.ts

@@ -10,12 +10,14 @@ import {NgModule} from '@angular/core';
 import {WorkerAppModule} from '@angular/platform-webworker';
 import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
 
-import {HelloCmp} from './index_common';
+import {HelloCmp, RedDec} from './index_common';
 
-@NgModule({imports: [WorkerAppModule], bootstrap: [HelloCmp], declarations: [HelloCmp]})
-class ExampleModule {
+@NgModule({
+  imports: [WorkerAppModule],
+  bootstrap: [HelloCmp],
+  declarations: [HelloCmp, RedDec],
+})
+export class ExampleModule {
 }
 
-export function main() {
-  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
-}
+platformWorkerAppDynamic().bootstrapModule(ExampleModule);

modules/playground/src/web_workers/kitchen_sink/index.html

@@ -20,7 +20,5 @@
   <hello-app>
     Loading...
   </hello-app>
-
-  <script src="../../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/web_workers/kitchen_sink/index.ts

@@ -8,6 +8,4 @@
 
 import {bootstrapWorkerUi} from '@angular/platform-webworker';
 
-export function main() {
-  bootstrapWorkerUi('loader.js');
-}
+bootstrapWorkerUi('loader.js');

modules/playground/src/web_workers/kitchen_sink/loader.js

@@ -6,19 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-importScripts(
-    '../../../vendor/core.js', '../../../vendor/zone.js',
-    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
-    '../../../vendor/Reflect.js');
-importScripts('../worker-systemjs-configure.js');
+importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
 
-System.import('playground/src/web_workers/kitchen_sink/background_index')
-    .then(
-        function(m) {
-          try {
-            m.main();
-          } catch (e) {
-            console.error(e);
-          }
-        },
-        function(error) { console.error('error loading background', error); });
+System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
+
+System.import('./background_index.js')
+    .catch(error => console.error('error loading background', error));

modules/playground/src/web_workers/message_broker/BUILD.bazel

@@ -0,0 +1,33 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+package(default_visibility = ["//modules/playground:__subpackages__"])
+
+ng_module(
+    name = "message_broker",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//modules/playground:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/core",
+        "//packages/platform-webworker",
+        "//packages/platform-webworker-dynamic",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        "loader.js",
+        "//modules/playground/src/web_workers:worker-config",
+        "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
+        "@ngdeps//node_modules/tslib:tslib.js",
+    ],
+    entry_module = "angular/modules/playground/src/web_workers/message_broker/index",
+    index_html = "index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
+    deps = [":message_broker"],
+)

modules/playground/src/web_workers/message_broker/background_index.ts

@@ -13,9 +13,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
 import {App} from './index_common';
 
 @NgModule({imports: [WorkerAppModule], bootstrap: [App], declarations: [App]})
-class ExampleModule {
+export class ExampleModule {
 }
 
-export function main() {
-  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
-}
+platformWorkerAppDynamic().bootstrapModule(ExampleModule);

modules/playground/src/web_workers/message_broker/index.html

@@ -7,6 +7,5 @@
   <button type="button" id="send_echo">Send Echo</button>
   <p id="echo_result"></p>
   <p id="ui_result"></p>
-  <script src="../../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/web_workers/message_broker/index.ts

@@ -11,10 +11,6 @@ import {ClientMessageBrokerFactory, FnArg, SerializerTypes, UiArguments, bootstr
 
 const ECHO_CHANNEL = 'ECHO';
 
-export function main() {
-  bootstrapWorkerUi('loader.js').then(afterBootstrap);
-}
-
 function afterBootstrap(ref: PlatformRef) {
   const brokerFactory: ClientMessageBrokerFactory = ref.injector.get(ClientMessageBrokerFactory);
   const broker = brokerFactory.createMessageBroker(ECHO_CHANNEL, false);
@@ -32,3 +28,5 @@ function afterBootstrap(ref: PlatformRef) {
     });
   });
 }
+
+bootstrapWorkerUi('loader.js').then(afterBootstrap);

modules/playground/src/web_workers/message_broker/loader.js

@@ -6,19 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-importScripts(
-    '../../../vendor/core.js', '../../../vendor/zone.js',
-    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
-    '../../../vendor/Reflect.js');
-importScripts('../worker-systemjs-configure.js');
+importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
 
-System.import('playground/src/web_workers/message_broker/background_index')
-    .then(
-        function(m) {
-          try {
-            m.main();
-          } catch (e) {
-            console.error(e);
-          }
-        },
-        function(error) { console.error('error loading background', error); });
+System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
+
+System.import('./background_index.js')
+    .catch(error => console.error('error loading background', error));

modules/playground/src/web_workers/router/BUILD.bazel

@@ -0,0 +1,34 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+package(default_visibility = ["//modules/playground:__subpackages__"])
+
+ng_module(
+    name = "router",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//modules/playground:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/core",
+        "//packages/platform-webworker",
+        "//packages/platform-webworker-dynamic",
+        "//packages/router",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        "loader.js",
+        "//modules/playground/src/web_workers:worker-config",
+        "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
+        "@ngdeps//node_modules/tslib:tslib.js",
+    ],
+    entry_module = "angular/modules/playground/src/web_workers/router/index",
+    index_html = "index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
+    deps = [":router"],
+)

modules/playground/src/web_workers/router/background_index.ts

@@ -7,9 +7,6 @@
  */
 
 import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
-
 import {AppModule} from './index_common';
 
-export function main() {
-  platformWorkerAppDynamic().bootstrapModule(AppModule);
-}
+platformWorkerAppDynamic().bootstrapModule(AppModule);

modules/playground/src/web_workers/router/index.html

@@ -3,6 +3,5 @@
   <title>Web Worker Router Example</title>
 <body>
   <app></app>
-  <script src="../../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/web_workers/router/index.ts

@@ -8,6 +8,4 @@
 
 import {WORKER_UI_LOCATION_PROVIDERS, bootstrapWorkerUi} from '@angular/platform-webworker';
 
-export function main() {
-  bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);
-}
+bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);

modules/playground/src/web_workers/router/loader.js

@@ -6,19 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-importScripts(
-    '../../../vendor/core.js', '../../../vendor/zone.js',
-    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
-    '../../../vendor/Reflect.js');
-importScripts('../worker-systemjs-configure.js');
+importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
 
-System.import('playground/src/web_workers/router/background_index')
-    .then(
-        function(m) {
-          try {
-            m.main();
-          } catch (e) {
-            console.error(e);
-          }
-        },
-        function(error) { console.error('error loading background', error); });
+System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
+
+System.import('./background_index.js')
+    .catch(error => console.error('error loading background', error));

modules/playground/src/web_workers/todo/BUILD.bazel

@@ -0,0 +1,35 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+package(default_visibility = ["//modules/playground:__subpackages__"])
+
+ng_module(
+    name = "todo",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//modules/playground:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/core",
+        "//packages/forms",
+        "//packages/platform-webworker",
+        "//packages/platform-webworker-dynamic",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        "css/main.css",
+        "loader.js",
+        "//modules/playground/src/web_workers:worker-config",
+        "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
+        "@ngdeps//node_modules/tslib:tslib.js",
+    ],
+    entry_module = "angular/modules/playground/src/web_workers/todo/index",
+    index_html = "index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
+    deps = [":todo"],
+)

modules/playground/src/web_workers/todo/background_index.ts

@@ -14,9 +14,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
 import {TodoApp} from './index_common';
 
 @NgModule({imports: [WorkerAppModule, FormsModule], bootstrap: [TodoApp], declarations: [TodoApp]})
-class ExampleModule {
+export class ExampleModule {
 }
 
-export function main() {
-  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
-}
+platformWorkerAppDynamic().bootstrapModule(ExampleModule);

modules/playground/src/web_workers/todo/index.html

@@ -6,8 +6,5 @@
   <todo-app>
     Loading...
   </todo-app>
-
-
-  <script src="../../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/web_workers/todo/index.ts

@@ -8,6 +8,4 @@
 
 import {bootstrapWorkerUi} from '@angular/platform-webworker';
 
-export function main() {
-  bootstrapWorkerUi('loader.js');
-}
+bootstrapWorkerUi('loader.js');

modules/playground/src/web_workers/todo/loader.js

@@ -6,19 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-importScripts(
-    '../../../vendor/core.js', '../../../vendor/zone.js',
-    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
-    '../../../vendor/Reflect.js');
-importScripts('../worker-systemjs-configure.js');
+importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
 
-System.import('playground/src/web_workers/todo/background_index')
-    .then(
-        function(m) {
-          try {
-            m.main();
-          } catch (e) {
-            console.error(e);
-          }
-        },
-        function(error) { console.error('error loading background', error); });
+System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
+
+System.import('./background_index.js')
+    .catch(error => console.error('error loading background', error));

modules/playground/src/web_workers/worker-configure.js

@@ -0,0 +1,14 @@
+/**
+ * @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
+ */
+
+importScripts('ngdeps/node_modules/reflect-metadata/Reflect.js');
+importScripts('ngdeps/node_modules/zone.js/dist/zone.js');
+importScripts('ngdeps/node_modules/zone.js/dist/long-stack-trace-zone.js');
+importScripts('ngdeps/node_modules/systemjs/dist/system.js');
+
+importScripts('angular/modules/playground/systemjs-config.js');

modules/playground/src/web_workers/worker-systemjs-configure.ts

@@ -1,43 +0,0 @@
-/**
- * @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
- */
-
-declare var System: any;
-
-System.config({
-  baseURL: '/all',
-  map: {
-    '@angular/common': '/packages-dist/common/bundles/common.umd.js',
-    '@angular/animations': '/packages-dist/animation/bundles/animations.umd.js',
-    '@angular/platform-browser/animations':
-        '/packages-dist/platform-browser/animations/bundles/platform-browser-animations.umd.js',
-    '@angular/compiler': '/packages-dist/compiler/bundles/compiler.umd.js',
-    '@angular/core': '/packages-dist/core/bundles/core.umd.js',
-    '@angular/forms': '/packages-dist/forms/bundles/forms.umd.js',
-    '@angular/http': '/packages-dist/http/bundles/http.umd.js',
-    '@angular/platform-browser': '/packages-dist/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic':
-        '/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/platform-webworker':
-        '/packages-dist/platform-webworker/bundles/platform-webworker.umd.js',
-    '@angular/platform-webworker-dynamic':
-        '/packages-dist/platform-webworker-dynamic/bundles/platform-webworker-dynamic.umd.js',
-    '@angular/router': '/packages-dist/router/bundles/router.umd.js',
-    '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js',
-    '@angular/upgrade/static': '/packages-dist/upgrade/bundles/upgrade-static.umd.js',
-    'rxjs': '/all/playground/vendor/rxjs',
-  },
-  packages: {
-    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
-    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
-    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
-    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
-    'rxjs': {main: 'index.js', defaultExtension: 'js'},
-  },
-
-  defaultJSExtensions: true
-});