From e4fb93c28af771aaaee05fad114dda0180320de5 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Fri, 1 Feb 2019 14:27:13 +0100 Subject: [PATCH] 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/BUILD.bazel | 6 ++ modules/playground/README.md | 16 +-- modules/playground/src/animate/BUILD.bazel | 32 ++++++ .../playground/src/animate/app/animate-app.ts | 2 +- modules/playground/src/animate/index.html | 1 - modules/playground/src/animate/index.ts | 6 +- modules/playground/src/async/BUILD.bazel | 30 ++++++ modules/playground/src/async/index.html | 2 - modules/playground/src/async/index.ts | 4 +- modules/playground/src/benchpress/BUILD.bazel | 9 ++ modules/playground/src/bootstrap.ts | 102 ------------------ modules/playground/src/gestures/BUILD.bazel | 32 ++++++ modules/playground/src/gestures/index.html | 3 - modules/playground/src/gestures/index.ts | 4 +- .../playground/src/hello_world/BUILD.bazel | 30 ++++++ modules/playground/src/hello_world/index.html | 2 - modules/playground/src/hello_world/index.ts | 8 +- modules/playground/src/http/BUILD.bazel | 32 ++++++ modules/playground/src/http/index.html | 2 - modules/playground/src/http/index.ts | 6 +- modules/playground/src/jsonp/BUILD.bazel | 32 ++++++ modules/playground/src/jsonp/index.html | 2 - modules/playground/src/jsonp/index.ts | 6 +- modules/playground/src/key_events/BUILD.bazel | 30 ++++++ modules/playground/src/key_events/index.html | 2 - modules/playground/src/key_events/index.ts | 8 +- .../src/model_driven_forms/BUILD.bazel | 31 ++++++ .../src/model_driven_forms/index.html | 2 - .../src/model_driven_forms/index.ts | 10 +- .../src/order_management/BUILD.bazel | 31 ++++++ .../src/order_management/index.html | 2 - .../playground/src/order_management/index.ts | 16 ++- .../src/person_management/BUILD.bazel | 31 ++++++ .../src/person_management/index.html | 2 - .../playground/src/person_management/index.ts | 16 ++- .../src/relative_assets/BUILD.bazel | 39 +++++++ .../src/relative_assets/app/my_cmp.ts | 9 ++ .../playground/src/relative_assets/index.html | 2 - .../playground/src/relative_assets/index.ts | 8 +- modules/playground/src/routing/BUILD.bazel | 40 +++++++ .../playground/src/routing/app/inbox-app.ts | 10 +- .../src/routing/app/inbox-detail.ts | 4 +- modules/playground/src/routing/css/gumby.css | 2 +- modules/playground/src/routing/index.html | 14 ++- modules/playground/src/routing/load-app.js | 22 ++++ .../src/routing/{index.ts => main.ts} | 19 ++-- modules/playground/src/sourcemap/BUILD.bazel | 34 ++++++ modules/playground/src/sourcemap/index.html | 2 - modules/playground/src/sourcemap/index.ts | 6 +- modules/playground/src/svg/BUILD.bazel | 30 ++++++ modules/playground/src/svg/index.html | 1 - modules/playground/src/svg/index.ts | 10 +- .../src/template_driven_forms/BUILD.bazel | 31 ++++++ .../src/template_driven_forms/index.html | 2 - .../src/template_driven_forms/index.ts | 16 ++- modules/playground/src/todo/BUILD.bazel | 31 ++++++ modules/playground/src/todo/index.html | 3 - modules/playground/src/todo/index.ts | 8 +- modules/playground/src/todo/todo.html | 2 +- modules/playground/src/upgrade/BUILD.bazel | 31 ++++++ modules/playground/src/upgrade/index.html | 2 - modules/playground/src/upgrade/index.ts | 12 +-- .../playground/src/web_workers/BUILD.bazel | 13 +++ .../src/web_workers/animations/BUILD.bazel | 34 ++++++ .../animations/background_index.ts | 6 +- .../src/web_workers/animations/index.html | 1 - .../src/web_workers/animations/index.ts | 4 +- .../src/web_workers/animations/loader.js | 20 +--- .../src/web_workers/images/BUILD.bazel | 35 ++++++ .../web_workers/images/background_index.ts | 6 +- .../src/web_workers/images/index.html | 2 - .../src/web_workers/images/index.ts | 4 +- .../src/web_workers/images/loader.js | 25 ++--- .../src/web_workers/images/services/bitmap.ts | 2 +- .../src/web_workers/input/BUILD.bazel | 33 ++++++ .../src/web_workers/input/background_index.ts | 6 +- .../src/web_workers/input/index.html | 2 - .../playground/src/web_workers/input/index.ts | 4 +- .../src/web_workers/input/loader.js | 20 +--- .../src/web_workers/kitchen_sink/BUILD.bazel | 33 ++++++ .../kitchen_sink/background_index.ts | 14 +-- .../src/web_workers/kitchen_sink/index.html | 2 - .../src/web_workers/kitchen_sink/index.ts | 4 +- .../src/web_workers/kitchen_sink/loader.js | 20 +--- .../web_workers/message_broker/BUILD.bazel | 33 ++++++ .../message_broker/background_index.ts | 6 +- .../src/web_workers/message_broker/index.html | 1 - .../src/web_workers/message_broker/index.ts | 6 +- .../src/web_workers/message_broker/loader.js | 20 +--- .../src/web_workers/router/BUILD.bazel | 34 ++++++ .../web_workers/router/background_index.ts | 5 +- .../src/web_workers/router/index.html | 1 - .../src/web_workers/router/index.ts | 4 +- .../src/web_workers/router/loader.js | 20 +--- .../src/web_workers/todo/BUILD.bazel | 35 ++++++ .../src/web_workers/todo/background_index.ts | 6 +- .../src/web_workers/todo/index.html | 3 - .../playground/src/web_workers/todo/index.ts | 4 +- .../playground/src/web_workers/todo/loader.js | 20 +--- .../src/web_workers/worker-configure.js | 14 +++ .../web_workers/worker-systemjs-configure.ts | 43 -------- .../src/zippy_component/BUILD.bazel | 31 ++++++ .../src/zippy_component/app/zippy.ts | 2 +- .../playground/src/zippy_component/index.html | 2 - .../playground/src/zippy_component/index.ts | 8 +- modules/playground/systemjs-config.js | 49 +++++++++ modules/playground/systemjs-rxjs-operators.js | 20 ++++ modules/playground/tsconfig-build.json | 6 ++ modules/tsconfig.json | 1 + package.json | 6 +- 110 files changed, 1135 insertions(+), 475 deletions(-) create mode 100644 modules/playground/BUILD.bazel create mode 100644 modules/playground/src/animate/BUILD.bazel create mode 100644 modules/playground/src/async/BUILD.bazel create mode 100644 modules/playground/src/benchpress/BUILD.bazel delete mode 100644 modules/playground/src/bootstrap.ts create mode 100644 modules/playground/src/gestures/BUILD.bazel create mode 100644 modules/playground/src/hello_world/BUILD.bazel create mode 100644 modules/playground/src/http/BUILD.bazel create mode 100644 modules/playground/src/jsonp/BUILD.bazel create mode 100644 modules/playground/src/key_events/BUILD.bazel create mode 100644 modules/playground/src/model_driven_forms/BUILD.bazel create mode 100644 modules/playground/src/order_management/BUILD.bazel create mode 100644 modules/playground/src/person_management/BUILD.bazel create mode 100644 modules/playground/src/relative_assets/BUILD.bazel create mode 100644 modules/playground/src/routing/BUILD.bazel create mode 100644 modules/playground/src/routing/load-app.js rename modules/playground/src/routing/{index.ts => main.ts} (60%) create mode 100644 modules/playground/src/sourcemap/BUILD.bazel create mode 100644 modules/playground/src/svg/BUILD.bazel create mode 100644 modules/playground/src/template_driven_forms/BUILD.bazel create mode 100644 modules/playground/src/todo/BUILD.bazel create mode 100644 modules/playground/src/upgrade/BUILD.bazel create mode 100644 modules/playground/src/web_workers/BUILD.bazel create mode 100644 modules/playground/src/web_workers/animations/BUILD.bazel create mode 100644 modules/playground/src/web_workers/images/BUILD.bazel create mode 100644 modules/playground/src/web_workers/input/BUILD.bazel create mode 100644 modules/playground/src/web_workers/kitchen_sink/BUILD.bazel create mode 100644 modules/playground/src/web_workers/message_broker/BUILD.bazel create mode 100644 modules/playground/src/web_workers/router/BUILD.bazel create mode 100644 modules/playground/src/web_workers/todo/BUILD.bazel create mode 100644 modules/playground/src/web_workers/worker-configure.js delete mode 100644 modules/playground/src/web_workers/worker-systemjs-configure.ts create mode 100644 modules/playground/src/zippy_component/BUILD.bazel create mode 100644 modules/playground/systemjs-config.js create mode 100644 modules/playground/systemjs-rxjs-operators.js create mode 100644 modules/playground/tsconfig-build.json diff --git a/modules/playground/BUILD.bazel b/modules/playground/BUILD.bazel new file mode 100644 index 00000000000..45e5be832f6 --- /dev/null +++ b/modules/playground/BUILD.bazel @@ -0,0 +1,6 @@ +exports_files([ + "tsconfig-build.json", + "tsconfig-e2e.json", + "systemjs-config.js", + "systemjs-rxjs-operators.js", +]) diff --git a/modules/playground/README.md b/modules/playground/README.md index 213a5faafb2..50172f008d6 100644 --- a/modules/playground/README.md +++ b/modules/playground/README.md @@ -1,8 +1,12 @@ -# How to run the examples locally +## How to serve the examples -``` -$ cp -r ./modules/playground ./dist/all/ -$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w -$ gulp serve -$ open http://localhost:8000/all/playground/src/hello_world/index.html?bundles=false +All playground examples are built and served with Bazel. Below is an example that +demonstrates how a specific example can be built and served with Bazel: + +```bash +# e.g. src/zippy_component +yarn bazel run modules/playground/src/zippy_component:devserver + +# e.g. src/upgrade +yarn bazel run modules/playground/src/upgrade:devserver ``` \ No newline at end of file diff --git a/modules/playground/src/animate/BUILD.bazel b/modules/playground/src/animate/BUILD.bazel new file mode 100644 index 00000000000..de99d380159 --- /dev/null +++ b/modules/playground/src/animate/BUILD.bazel @@ -0,0 +1,32 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "animate", + srcs = glob(["**/*.ts"]), + assets = glob(["**/*.css"]), + 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-browser-dynamic", + "//packages/platform-browser/animations", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/animate/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":animate"], +) diff --git a/modules/playground/src/animate/app/animate-app.ts b/modules/playground/src/animate/app/animate-app.ts index 0dba74ec690..273fa544156 100644 --- a/modules/playground/src/animate/app/animate-app.ts +++ b/modules/playground/src/animate/app/animate-app.ts @@ -16,7 +16,7 @@ import {Component} from '@angular/core'; '(@backgroundAnimation.done)': 'bgStatusChanged($event, "completed")' }, selector: 'animate-app', - styleUrls: ['css/animate-app.css'], + styleUrls: ['../css/animate-app.css'], template: ` diff --git a/modules/playground/src/animate/index.html b/modules/playground/src/animate/index.html index acaaacef316..f4591b33e0f 100644 --- a/modules/playground/src/animate/index.html +++ b/modules/playground/src/animate/index.html @@ -15,6 +15,5 @@ Loading... - diff --git a/modules/playground/src/animate/index.ts b/modules/playground/src/animate/index.ts index 68ef663588c..8d9e09bd2c3 100644 --- a/modules/playground/src/animate/index.ts +++ b/modules/playground/src/animate/index.ts @@ -12,9 +12,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {AnimateApp} from './app/animate-app'; @NgModule({declarations: [AnimateApp], bootstrap: [AnimateApp], imports: [BrowserAnimationsModule]}) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/async/BUILD.bazel b/modules/playground/src/async/BUILD.bazel new file mode 100644 index 00000000000..7d81f1bd669 --- /dev/null +++ b/modules/playground/src/async/BUILD.bazel @@ -0,0 +1,30 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "async", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/async/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":async"], +) diff --git a/modules/playground/src/async/index.html b/modules/playground/src/async/index.html index 64f40da63ae..5d56cfbef29 100644 --- a/modules/playground/src/async/index.html +++ b/modules/playground/src/async/index.html @@ -8,7 +8,5 @@ Loading... - - diff --git a/modules/playground/src/async/index.ts b/modules/playground/src/async/index.ts index a476f9da80d..d3405212e02 100644 --- a/modules/playground/src/async/index.ts +++ b/modules/playground/src/async/index.ts @@ -103,6 +103,4 @@ class AsyncApplication { class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/benchpress/BUILD.bazel b/modules/playground/src/benchpress/BUILD.bazel new file mode 100644 index 00000000000..3816a88355d --- /dev/null +++ b/modules/playground/src/benchpress/BUILD.bazel @@ -0,0 +1,9 @@ +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ts_devserver( + name = "devserver", + index_html = "index.html", + port = 4200, +) diff --git a/modules/playground/src/bootstrap.ts b/modules/playground/src/bootstrap.ts deleted file mode 100644 index 92daa49b1d7..00000000000 --- a/modules/playground/src/bootstrap.ts +++ /dev/null @@ -1,102 +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 - */ - - -(function(global: any) { - writeScriptTag('/all/playground/vendor/core.js'); - writeScriptTag('/all/playground/vendor/zone.js'); - writeScriptTag('/all/playground/vendor/long-stack-trace-zone.js'); - writeScriptTag('/all/playground/vendor/system.src.js'); - writeScriptTag('/all/playground/vendor/Reflect.js', 'playgroundBootstrap()'); - - global.playgroundBootstrap = playgroundBootstrap; - - function playgroundBootstrap() { - // check query param - const useBundles = location.search.indexOf('bundles=false') == -1; - - if (useBundles) { - System.config({ - map: { - 'index': 'index.js', - '@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: { - 'app': {defaultExtension: 'js'}, - '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'}, - - } - }); - } else { - console.warn( - 'Not using the Angular bundles. Don\'t use this configuration for e2e/performance tests!'); - - System.config({ - map: { - 'index': 'index.js', - '@angular': '/all/@angular', - 'rxjs': '/all/playground/vendor/rxjs', - }, - packages: { - 'app': {defaultExtension: 'js'}, - '@angular/common': {main: 'index.js', defaultExtension: 'js'}, - '@angular/animations': {main: 'index.js', defaultExtension: 'js'}, - '@angular/compiler': {main: 'index.js', defaultExtension: 'js'}, - '@angular/core': {main: 'index.js', defaultExtension: 'js'}, - '@angular/forms': {main: 'index.js', defaultExtension: 'js'}, - '@angular/http': {main: 'index.js', defaultExtension: 'js'}, - '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'}, - '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'}, - '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'}, - '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'}, - '@angular/router': {main: 'index.js', defaultExtension: 'js'}, - '@angular/upgrade': {main: 'index.js', defaultExtension: 'js'}, - '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'}, - } - }); - } - - - // BOOTSTRAP the app! - System.import('index').then(function(m: {main: Function}) { - m.main(); - }, console.error.bind(console)); - } - - - function writeScriptTag(scriptUrl: string, onload?: string) { - document.write(``); - } -}(window)); diff --git a/modules/playground/src/gestures/BUILD.bazel b/modules/playground/src/gestures/BUILD.bazel new file mode 100644 index 00000000000..b96fd250d71 --- /dev/null +++ b/modules/playground/src/gestures/BUILD.bazel @@ -0,0 +1,32 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "gestures", + 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-browser", + "//packages/platform-browser-dynamic", + "@ngdeps//@types/hammerjs", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/gestures/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/hammerjs:hammer.js", + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":gestures"], +) diff --git a/modules/playground/src/gestures/index.html b/modules/playground/src/gestures/index.html index 746684c1e93..fe941f1e00a 100644 --- a/modules/playground/src/gestures/index.html +++ b/modules/playground/src/gestures/index.html @@ -14,8 +14,5 @@ - - - diff --git a/modules/playground/src/gestures/index.ts b/modules/playground/src/gestures/index.ts index 29d099f5e78..2dbc531eb68 100644 --- a/modules/playground/src/gestures/index.ts +++ b/modules/playground/src/gestures/index.ts @@ -27,6 +27,4 @@ class GesturesCmp { class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/hello_world/BUILD.bazel b/modules/playground/src/hello_world/BUILD.bazel new file mode 100644 index 00000000000..1a89868573a --- /dev/null +++ b/modules/playground/src/hello_world/BUILD.bazel @@ -0,0 +1,30 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "hello_world", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/hello_world/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":hello_world"], +) diff --git a/modules/playground/src/hello_world/index.html b/modules/playground/src/hello_world/index.html index 6e75312ae16..3bac186b20c 100644 --- a/modules/playground/src/hello_world/index.html +++ b/modules/playground/src/hello_world/index.html @@ -5,7 +5,5 @@ Loading... - - diff --git a/modules/playground/src/hello_world/index.ts b/modules/playground/src/hello_world/index.ts index 2478447c93b..b6f14994ed2 100644 --- a/modules/playground/src/hello_world/index.ts +++ b/modules/playground/src/hello_world/index.ts @@ -10,10 +10,6 @@ import {Component, Directive, ElementRef, Injectable, NgModule, Renderer} from ' import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} - // A service available to the Injector, used by the HelloCmp component. @Injectable() export class GreetingService { @@ -58,5 +54,7 @@ export class HelloCmp { } @NgModule({declarations: [HelloCmp, RedDec], bootstrap: [HelloCmp], imports: [BrowserModule]}) -class ExampleModule { +export class ExampleModule { } + +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/http/BUILD.bazel b/modules/playground/src/http/BUILD.bazel new file mode 100644 index 00000000000..676990e4e29 --- /dev/null +++ b/modules/playground/src/http/BUILD.bazel @@ -0,0 +1,32 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "http", + 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/http", + "//packages/platform-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + data = ["people.json"], + entry_module = "angular/modules/playground/src/http/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":http"], +) diff --git a/modules/playground/src/http/index.html b/modules/playground/src/http/index.html index fa19f65ec4d..229d9303f30 100644 --- a/modules/playground/src/http/index.html +++ b/modules/playground/src/http/index.html @@ -5,7 +5,5 @@ Loading... - - diff --git a/modules/playground/src/http/index.ts b/modules/playground/src/http/index.ts index 9fbc0841185..19672e8b548 100644 --- a/modules/playground/src/http/index.ts +++ b/modules/playground/src/http/index.ts @@ -14,9 +14,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {HttpCmp} from './app/http_comp'; @NgModule({declarations: [HttpCmp], bootstrap: [HttpCmp], imports: [BrowserModule, HttpModule]}) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/jsonp/BUILD.bazel b/modules/playground/src/jsonp/BUILD.bazel new file mode 100644 index 00000000000..2cf58c5573b --- /dev/null +++ b/modules/playground/src/jsonp/BUILD.bazel @@ -0,0 +1,32 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "jsonp", + 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/http", + "//packages/platform-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + data = ["people.json"], + entry_module = "angular/modules/playground/src/jsonp/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":jsonp"], +) diff --git a/modules/playground/src/jsonp/index.html b/modules/playground/src/jsonp/index.html index e4fadcf6433..5ea6a289d70 100644 --- a/modules/playground/src/jsonp/index.html +++ b/modules/playground/src/jsonp/index.html @@ -5,7 +5,5 @@ Loading... - - diff --git a/modules/playground/src/jsonp/index.ts b/modules/playground/src/jsonp/index.ts index b840bf025f7..c9e6501b8ab 100644 --- a/modules/playground/src/jsonp/index.ts +++ b/modules/playground/src/jsonp/index.ts @@ -14,9 +14,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {JsonpCmp} from './app/jsonp_comp'; @NgModule({bootstrap: [JsonpCmp], declarations: [JsonpCmp], imports: [BrowserModule, JsonpModule]}) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/key_events/BUILD.bazel b/modules/playground/src/key_events/BUILD.bazel new file mode 100644 index 00000000000..08b0584912d --- /dev/null +++ b/modules/playground/src/key_events/BUILD.bazel @@ -0,0 +1,30 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "key_events", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/key_events/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":key_events"], +) diff --git a/modules/playground/src/key_events/index.html b/modules/playground/src/key_events/index.html index 70b7f5fc433..99d1babc805 100644 --- a/modules/playground/src/key_events/index.html +++ b/modules/playground/src/key_events/index.html @@ -20,7 +20,5 @@ Loading... - - diff --git a/modules/playground/src/key_events/index.ts b/modules/playground/src/key_events/index.ts index 116c3ce4beb..e73aaf437b1 100644 --- a/modules/playground/src/key_events/index.ts +++ b/modules/playground/src/key_events/index.ts @@ -22,7 +22,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; tabindex="0" >{{shiftEnter ? 'You pressed shift.enter!' : ''}}` }) -class KeyEventsApp { +export class KeyEventsApp { lastKey: string = '(none)'; shiftEnter: boolean = false; @@ -71,9 +71,7 @@ class KeyEventsApp { } @NgModule({declarations: [KeyEventsApp], bootstrap: [KeyEventsApp], imports: [BrowserModule]}) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/model_driven_forms/BUILD.bazel b/modules/playground/src/model_driven_forms/BUILD.bazel new file mode 100644 index 00000000000..24058d1e942 --- /dev/null +++ b/modules/playground/src/model_driven_forms/BUILD.bazel @@ -0,0 +1,31 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "model_driven_forms", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/model_driven_forms/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":model_driven_forms"], +) diff --git a/modules/playground/src/model_driven_forms/index.html b/modules/playground/src/model_driven_forms/index.html index 366507deefb..fcc8603b8d6 100644 --- a/modules/playground/src/model_driven_forms/index.html +++ b/modules/playground/src/model_driven_forms/index.html @@ -13,7 +13,5 @@ Loading... - - diff --git a/modules/playground/src/model_driven_forms/index.ts b/modules/playground/src/model_driven_forms/index.ts index ebb78850a3b..b71d22cf76b 100644 --- a/modules/playground/src/model_driven_forms/index.ts +++ b/modules/playground/src/model_driven_forms/index.ts @@ -47,7 +47,7 @@ function creditCardValidator(c: AbstractControl): {[key: string]: boolean} { {{errorMessage}} ` }) -class ShowError { +export class ShowError { formDir: FormGroupDirective; controlPath: string; errorTypes: string[]; @@ -136,7 +136,7 @@ class ShowError { ` }) -class ReactiveForms { +export class ReactiveForms { form: FormGroup; countries = ['US', 'Canada']; @@ -164,9 +164,7 @@ class ReactiveForms { declarations: [ShowError, ReactiveForms], imports: [BrowserModule, ReactiveFormsModule] }) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/order_management/BUILD.bazel b/modules/playground/src/order_management/BUILD.bazel new file mode 100644 index 00000000000..12b0eed56d7 --- /dev/null +++ b/modules/playground/src/order_management/BUILD.bazel @@ -0,0 +1,31 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "order_management", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/order_management/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":order_management"], +) diff --git a/modules/playground/src/order_management/index.html b/modules/playground/src/order_management/index.html index 52098d69d08..21a1f483177 100644 --- a/modules/playground/src/order_management/index.html +++ b/modules/playground/src/order_management/index.html @@ -13,7 +13,5 @@ Loading... - - diff --git a/modules/playground/src/order_management/index.ts b/modules/playground/src/order_management/index.ts index ad1a2475033..b83b10b9f1f 100644 --- a/modules/playground/src/order_management/index.ts +++ b/modules/playground/src/order_management/index.ts @@ -41,7 +41,7 @@ class Order { let _nextId = 1000; @Injectable() -class DataService { +export class DataService { orderItems: OrderItem[]; orders: Order[]; currentOrder: Order = null; @@ -104,7 +104,7 @@ class DataService { ` }) -class OrderListComponent { +export class OrderListComponent { orders: Order[]; constructor(private _service: DataService) { this.orders = _service.orders; } @@ -137,7 +137,7 @@ class OrderListComponent { ` }) -class OrderItemComponent { +export class OrderItemComponent { @Input() item: OrderItem; @Output() delete = new EventEmitter(); @@ -173,7 +173,7 @@ class OrderItemComponent { ` }) -class OrderDetailsComponent { +export class OrderDetailsComponent { constructor(private _service: DataService) {} get order(): Order { return this._service.currentOrder; } @@ -191,7 +191,7 @@ class OrderDetailsComponent { ` }) -class OrderManagementApplication { +export class OrderManagementApplication { } @NgModule({ @@ -200,9 +200,7 @@ class OrderManagementApplication { [OrderManagementApplication, OrderListComponent, OrderDetailsComponent, OrderItemComponent], imports: [BrowserModule, FormsModule] }) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/person_management/BUILD.bazel b/modules/playground/src/person_management/BUILD.bazel new file mode 100644 index 00000000000..55d66aa41c4 --- /dev/null +++ b/modules/playground/src/person_management/BUILD.bazel @@ -0,0 +1,31 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "person_management", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/person_management/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":person_management"], +) diff --git a/modules/playground/src/person_management/index.html b/modules/playground/src/person_management/index.html index 905b2b2577b..13569410aa2 100644 --- a/modules/playground/src/person_management/index.html +++ b/modules/playground/src/person_management/index.html @@ -13,7 +13,5 @@ Loading... - - diff --git a/modules/playground/src/person_management/index.ts b/modules/playground/src/person_management/index.ts index bc867189c3b..3638ccecffd 100644 --- a/modules/playground/src/person_management/index.ts +++ b/modules/playground/src/person_management/index.ts @@ -45,7 +45,7 @@ class Person { // ---- services @Injectable() -class DataService { +export class DataService { currentPerson: Person; persons: Person[]; @@ -102,7 +102,7 @@ class DataService { ` }) -class FullNameComponent { +export class FullNameComponent { constructor(private _service: DataService) {} get person(): Person { return this._service.currentPerson; } } @@ -149,7 +149,7 @@ class FullNameComponent { ` }) -class PersonsDetailComponent { +export class PersonsDetailComponent { constructor(private _service: DataService) {} get person(): Person { return this._service.currentPerson; } } @@ -169,7 +169,7 @@ class PersonsDetailComponent { ` }) -class PersonsComponent { +export class PersonsComponent { persons: Person[]; constructor(private _service: DataService) { this.persons = _service.persons; } @@ -189,7 +189,7 @@ class PersonsComponent { ` }) -class PersonManagementApplication { +export class PersonManagementApplication { mode: string; switchToEditName(): void { this.mode = 'editName'; } @@ -202,9 +202,7 @@ class PersonManagementApplication { [PersonManagementApplication, FullNameComponent, PersonsComponent, PersonsDetailComponent], imports: [BrowserModule, FormsModule] }) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/relative_assets/BUILD.bazel b/modules/playground/src/relative_assets/BUILD.bazel new file mode 100644 index 00000000000..faa1534bfb9 --- /dev/null +++ b/modules/playground/src/relative_assets/BUILD.bazel @@ -0,0 +1,39 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "relative_assets", + srcs = glob(["**/*.ts"]), + # This example demonstrates how external resources can be loaded relatively, so we + # need to disable resource inlining. + inline_resources = False, + tsconfig = "//modules/playground:tsconfig-build.json", + # TODO: FW-1004 Type checking is currently not complete. + type_check = False, + deps = [ + "//packages/core", + "//packages/platform-browser", + "//packages/platform-browser-dynamic", + # Needed because the example uses "module.id" in order to load assets relatively. + "@ngdeps//@types/node", + ], +) + +ts_devserver( + name = "devserver", + data = [ + "app/style.css", + "app/tpl.html", + ], + entry_module = "angular/modules/playground/src/relative_assets/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":relative_assets"], +) diff --git a/modules/playground/src/relative_assets/app/my_cmp.ts b/modules/playground/src/relative_assets/app/my_cmp.ts index 77e6fb10927..e7d1b4c8adc 100644 --- a/modules/playground/src/relative_assets/app/my_cmp.ts +++ b/modules/playground/src/relative_assets/app/my_cmp.ts @@ -6,7 +6,16 @@ * found in the LICENSE file at https://angular.io/license */ +// Declare the AMD dependency on "module" because otherwise the generated AMD module will +// try to reference "module.id" from the globals, while we want the one from RequireJS. +/// + +// We use the "node" type here because "module.id" is part of "CommonJS" and Bazel compiles +// with "umd" module resolution which means that "module.id" is not a defined global variable. +/// + import {Component} from '@angular/core'; + @Component( {selector: 'my-cmp', templateUrl: 'tpl.html', styleUrls: ['style.css'], moduleId: module.id}) export class MyCmp { diff --git a/modules/playground/src/relative_assets/index.html b/modules/playground/src/relative_assets/index.html index 20bd353c1fc..2bebbe2b2eb 100644 --- a/modules/playground/src/relative_assets/index.html +++ b/modules/playground/src/relative_assets/index.html @@ -5,7 +5,5 @@ Loading... - - diff --git a/modules/playground/src/relative_assets/index.ts b/modules/playground/src/relative_assets/index.ts index 43894d02a7d..91aa4e1c78c 100644 --- a/modules/playground/src/relative_assets/index.ts +++ b/modules/playground/src/relative_assets/index.ts @@ -12,10 +12,6 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {MyCmp} from './app/my_cmp'; -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} - @Component({ selector: 'relative-app', template: `component = `, @@ -24,5 +20,7 @@ export class RelativeApp { } @NgModule({declarations: [RelativeApp, MyCmp], bootstrap: [RelativeApp], imports: [BrowserModule]}) -class ExampleModule { +export class ExampleModule { } + +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/routing/BUILD.bazel b/modules/playground/src/routing/BUILD.bazel new file mode 100644 index 00000000000..17a69550c95 --- /dev/null +++ b/modules/playground/src/routing/BUILD.bazel @@ -0,0 +1,40 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "routing", + srcs = glob(["**/*.ts"]), + assets = glob(["**/*.html"]), + tsconfig = "//modules/playground:tsconfig-build.json", + # TODO: FW-1004 Type checking is currently not complete. + type_check = False, + deps = [ + "//packages/core", + "//packages/platform-browser", + "//packages/platform-browser-dynamic", + "//packages/router", + ], +) + +ts_devserver( + name = "devserver", + data = [ + # This is temporarily needed because Angular imports from "rxjs/operators/index", while + # there is only one RxJS UMD bundle that re-exports everything at the root. + "//modules/playground:systemjs-rxjs-operators.js", + "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js", + "@ngdeps//node_modules/tslib:tslib.js", + ] + glob(["**/*.css"]), + port = 4200, + static_files = [ + "index.html", + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + "@ngdeps//node_modules/systemjs:dist/system.js", + "//modules/playground:systemjs-config.js", + "load-app.js", + ], + deps = [":routing"], +) diff --git a/modules/playground/src/routing/app/inbox-app.ts b/modules/playground/src/routing/app/inbox-app.ts index 86bf0cb7f62..2d87ef3719d 100644 --- a/modules/playground/src/routing/app/inbox-app.ts +++ b/modules/playground/src/routing/app/inbox-app.ts @@ -84,9 +84,9 @@ export class DbService { } } -@Component({selector: 'inbox', templateUrl: 'app/inbox.html'}) +@Component({selector: 'inbox', templateUrl: './inbox.html'}) export class InboxCmp { - private items: InboxRecord[] = []; + items: InboxRecord[] = []; private ready: boolean = false; constructor(public router: Router, db: DbService, route: ActivatedRoute) { @@ -107,9 +107,9 @@ export class InboxCmp { } -@Component({selector: 'drafts', templateUrl: 'app/drafts.html'}) +@Component({selector: 'drafts', templateUrl: './drafts.html'}) export class DraftsCmp { - private items: InboxRecord[] = []; + items: InboxRecord[] = []; private ready: boolean = false; constructor(private router: Router, db: DbService) { @@ -125,6 +125,6 @@ export const ROUTER_CONFIG = [ {path: 'drafts', component: DraftsCmp}, {path: 'detail', loadChildren: 'app/inbox-detail.js'} ]; -@Component({selector: 'inbox-app', templateUrl: 'app/inbox-app.html'}) +@Component({selector: 'inbox-app', templateUrl: './inbox-app.html'}) export class InboxApp { } diff --git a/modules/playground/src/routing/app/inbox-detail.ts b/modules/playground/src/routing/app/inbox-detail.ts index 584ccc9e803..d59ccd0e0c1 100644 --- a/modules/playground/src/routing/app/inbox-detail.ts +++ b/modules/playground/src/routing/app/inbox-detail.ts @@ -11,9 +11,9 @@ import {ActivatedRoute, RouterModule} from '@angular/router'; import {DbService, InboxRecord} from './inbox-app'; -@Component({selector: 'inbox-detail', templateUrl: 'app/inbox-detail.html'}) +@Component({selector: 'inbox-detail', templateUrl: './inbox-detail.html'}) export class InboxDetailCmp { - private record: InboxRecord = new InboxRecord(); + record: InboxRecord = new InboxRecord(); private ready: boolean = false; constructor(db: DbService, route: ActivatedRoute) { diff --git a/modules/playground/src/routing/css/gumby.css b/modules/playground/src/routing/css/gumby.css index af8373bec01..70b2bcb553f 100644 --- a/modules/playground/src/routing/css/gumby.css +++ b/modules/playground/src/routing/css/gumby.css @@ -9,7 +9,7 @@ */ @charset "UTF-8"; -@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); /** * Gumby Framework * --------------- diff --git a/modules/playground/src/routing/index.html b/modules/playground/src/routing/index.html index 7d066f8cf37..414edae61cb 100644 --- a/modules/playground/src/routing/index.html +++ b/modules/playground/src/routing/index.html @@ -3,12 +3,20 @@ Routing Example - + Loading... - - + + + + + + diff --git a/modules/playground/src/routing/load-app.js b/modules/playground/src/routing/load-app.js new file mode 100644 index 00000000000..2be58f2f55c --- /dev/null +++ b/modules/playground/src/routing/load-app.js @@ -0,0 +1,22 @@ +/** + * @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 + */ + +/* + * Normally the "ts_devserver" bundles all specified source files into a bundle and uses + * Require.JS, but for this example we need to use SystemJS as module loader since this + * example uses lazy loading and we want to ensure that the default SystemJS factory loader + * works as expected. + */ + +System.config({ + packages: { + 'angular/modules/playground/src/routing': {defaultExtension: 'js'}, + } +}); + +System.import('./main.js').catch(e => console.error(e)); diff --git a/modules/playground/src/routing/index.ts b/modules/playground/src/routing/main.ts similarity index 60% rename from modules/playground/src/routing/index.ts rename to modules/playground/src/routing/main.ts index df1c7280a6b..17620bf5cfe 100644 --- a/modules/playground/src/routing/index.ts +++ b/modules/playground/src/routing/main.ts @@ -13,14 +13,13 @@ import {RouterModule} from '@angular/router'; import {DbService, DraftsCmp, InboxApp, InboxCmp, ROUTER_CONFIG} from './app/inbox-app'; -export function main() { - @NgModule({ - providers: [DbService], - declarations: [InboxCmp, DraftsCmp, InboxApp], - imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), BrowserModule], - bootstrap: [InboxApp] - }) - class RoutingExampleModule { - } - platformBrowserDynamic().bootstrapModule(RoutingExampleModule); +@NgModule({ + providers: [DbService], + declarations: [InboxCmp, DraftsCmp, InboxApp], + imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), BrowserModule], + bootstrap: [InboxApp], +}) +export class RoutingExampleModule { } + +platformBrowserDynamic().bootstrapModule(RoutingExampleModule); diff --git a/modules/playground/src/sourcemap/BUILD.bazel b/modules/playground/src/sourcemap/BUILD.bazel new file mode 100644 index 00000000000..0865ca9ceb7 --- /dev/null +++ b/modules/playground/src/sourcemap/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__"]) + +# Exported since the e2e test needs to read the source file in order to +# ensure that the source map properly maps back to the source file. +exports_files(["index.ts"]) + +ng_module( + name = "sourcemap", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/sourcemap/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":sourcemap"], +) diff --git a/modules/playground/src/sourcemap/index.html b/modules/playground/src/sourcemap/index.html index d1981b2a7e5..b16b2d60061 100644 --- a/modules/playground/src/sourcemap/index.html +++ b/modules/playground/src/sourcemap/index.html @@ -10,7 +10,5 @@ Please look into the console and check whether the stack trace is mapped via source maps!

- - diff --git a/modules/playground/src/sourcemap/index.ts b/modules/playground/src/sourcemap/index.ts index 497f88e2d9a..2a0622683da 100644 --- a/modules/playground/src/sourcemap/index.ts +++ b/modules/playground/src/sourcemap/index.ts @@ -20,9 +20,7 @@ export class ErrorComponent { } @NgModule({declarations: [ErrorComponent], bootstrap: [ErrorComponent], imports: [BrowserModule]}) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/svg/BUILD.bazel b/modules/playground/src/svg/BUILD.bazel new file mode 100644 index 00000000000..b7da7a0c7fb --- /dev/null +++ b/modules/playground/src/svg/BUILD.bazel @@ -0,0 +1,30 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "svg", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/svg/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":svg"], +) diff --git a/modules/playground/src/svg/index.html b/modules/playground/src/svg/index.html index f74683b9436..fb0d1490d9d 100644 --- a/modules/playground/src/svg/index.html +++ b/modules/playground/src/svg/index.html @@ -5,6 +5,5 @@ Loading... - diff --git a/modules/playground/src/svg/index.ts b/modules/playground/src/svg/index.ts index 82fa5bcc488..a914351711a 100644 --- a/modules/playground/src/svg/index.ts +++ b/modules/playground/src/svg/index.ts @@ -11,7 +11,7 @@ import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; @Component({selector: '[svg-group]', template: `Hello`}) -class SvgGroup { +export class SvgGroup { } @Component({ @@ -20,13 +20,11 @@ class SvgGroup { ` }) -class SvgApp { +export class SvgApp { } @NgModule({bootstrap: [SvgApp], declarations: [SvgApp, SvgGroup], imports: [BrowserModule]}) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/template_driven_forms/BUILD.bazel b/modules/playground/src/template_driven_forms/BUILD.bazel new file mode 100644 index 00000000000..23d1a5d73f8 --- /dev/null +++ b/modules/playground/src/template_driven_forms/BUILD.bazel @@ -0,0 +1,31 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "template_driven_forms", + 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-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/template_driven_forms/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":template_driven_forms"], +) diff --git a/modules/playground/src/template_driven_forms/index.html b/modules/playground/src/template_driven_forms/index.html index 19eb778b98a..76bb1fdb792 100644 --- a/modules/playground/src/template_driven_forms/index.html +++ b/modules/playground/src/template_driven_forms/index.html @@ -13,7 +13,5 @@ Loading... - - diff --git a/modules/playground/src/template_driven_forms/index.ts b/modules/playground/src/template_driven_forms/index.ts index eae084b6f2e..e5c316370ba 100644 --- a/modules/playground/src/template_driven_forms/index.ts +++ b/modules/playground/src/template_driven_forms/index.ts @@ -33,7 +33,7 @@ class CheckoutModel { /** * Custom validator. */ -function creditCardValidator(c: FormControl): {[key: string]: boolean} { +export function creditCardValidator(c: FormControl): {[key: string]: boolean} { if (c.value && /^\d{16}$/.test(c.value)) { return null; } else { @@ -41,14 +41,14 @@ function creditCardValidator(c: FormControl): {[key: string]: boolean} { } } -const creditCardValidatorBinding = { +export const creditCardValidatorBinding = { provide: NG_VALIDATORS, useValue: creditCardValidator, multi: true }; @Directive({selector: '[credit-card]', providers: [creditCardValidatorBinding]}) -class CreditCardValidator { +export class CreditCardValidator { } /** @@ -73,7 +73,7 @@ class CreditCardValidator { {{errorMessage}} ` }) -class ShowError { +export class ShowError { formDir: NgForm; controlPath: string; errorTypes: string[]; @@ -161,7 +161,7 @@ class ShowError { ` }) -class TemplateDrivenForms { +export class TemplateDrivenForms { model = new CheckoutModel(); countries = ['US', 'Canada']; @@ -175,9 +175,7 @@ class TemplateDrivenForms { bootstrap: [TemplateDrivenForms], imports: [BrowserModule, FormsModule] }) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/todo/BUILD.bazel b/modules/playground/src/todo/BUILD.bazel new file mode 100644 index 00000000000..bcc454ac4b8 --- /dev/null +++ b/modules/playground/src/todo/BUILD.bazel @@ -0,0 +1,31 @@ +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/platform-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + data = glob(["**/*.css"]), + entry_module = "angular/modules/playground/src/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", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":todo"], +) diff --git a/modules/playground/src/todo/index.html b/modules/playground/src/todo/index.html index 7f38ed0bf63..9a519073ef7 100644 --- a/modules/playground/src/todo/index.html +++ b/modules/playground/src/todo/index.html @@ -7,8 +7,5 @@ Loading... - - - diff --git a/modules/playground/src/todo/index.ts b/modules/playground/src/todo/index.ts index 6e8d91773a4..3e6526cf948 100644 --- a/modules/playground/src/todo/index.ts +++ b/modules/playground/src/todo/index.ts @@ -13,7 +13,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {Store, Todo, TodoFactory} from './app/TodoStore'; @Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'}) -class TodoApp { +export class TodoApp { todoEdit: Todo = null; constructor(public todoStore: Store, public factory: TodoFactory) {} @@ -52,9 +52,7 @@ class TodoApp { } @NgModule({declarations: [TodoApp], bootstrap: [TodoApp], imports: [BrowserModule]}) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/src/todo/todo.html b/modules/playground/src/todo/todo.html index 6799ec7569f..1a1b8d2cbbd 100644 --- a/modules/playground/src/todo/todo.html +++ b/modules/playground/src/todo/todo.html @@ -67,5 +67,5 @@ diff --git a/modules/playground/src/upgrade/BUILD.bazel b/modules/playground/src/upgrade/BUILD.bazel new file mode 100644 index 00000000000..c30cbc00893 --- /dev/null +++ b/modules/playground/src/upgrade/BUILD.bazel @@ -0,0 +1,31 @@ +load("//tools:defaults.bzl", "ts_library") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +# Since this test uses the AOT-incompatible version of "@angular/upgrade", we cannot +# use the "ng_module" rule here unless we switch this example to "upgrade/static". +ts_library( + name = "upgrade", + srcs = glob(["**/*.ts"]), + tsconfig = "//modules/playground:tsconfig-build.json", + deps = [ + "//packages/core", + "//packages/platform-browser", + "//packages/upgrade", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/upgrade/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + "@ngdeps//node_modules/angular:angular.js", + ], + deps = [":upgrade"], +) diff --git a/modules/playground/src/upgrade/index.html b/modules/playground/src/upgrade/index.html index 499a7be8fa0..0851d9079d9 100644 --- a/modules/playground/src/upgrade/index.html +++ b/modules/playground/src/upgrade/index.html @@ -16,7 +16,5 @@
Greetings from {{name}}! - - diff --git a/modules/playground/src/upgrade/index.ts b/modules/playground/src/upgrade/index.ts index 7eb2fffa9d2..809d004a889 100644 --- a/modules/playground/src/upgrade/index.ts +++ b/modules/playground/src/upgrade/index.ts @@ -50,7 +50,7 @@ ng1module.directive('ng1User', function() { `, styles: styles }) -class Pane { +export class Pane { @Input() title: string; } @@ -69,7 +69,7 @@ class Pane { `, styles: styles }) -class UpgradeApp { +export class UpgradeApp { @Input() user: string; @Output() reset = new EventEmitter(); constructor() {} @@ -77,14 +77,12 @@ class UpgradeApp { @NgModule({ declarations: [Pane, UpgradeApp, adapter.upgradeNg1Component('ng1User')], - imports: [BrowserModule] + imports: [BrowserModule], }) -class Ng2AppModule { +export class Ng2AppModule { } ng1module.directive('upgradeApp', adapter.downgradeNg2Component(UpgradeApp)); -export function main() { - adapter.bootstrap(document.body, ['myExample']); -} +adapter.bootstrap(document.body, ['myExample']); diff --git a/modules/playground/src/web_workers/BUILD.bazel b/modules/playground/src/web_workers/BUILD.bazel new file mode 100644 index 00000000000..03a0fd21d9a --- /dev/null +++ b/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", + ], +) diff --git a/modules/playground/src/web_workers/animations/BUILD.bazel b/modules/playground/src/web_workers/animations/BUILD.bazel new file mode 100644 index 00000000000..35138500eae --- /dev/null +++ b/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"], +) diff --git a/modules/playground/src/web_workers/animations/background_index.ts b/modules/playground/src/web_workers/animations/background_index.ts index 7f541be7634..d6beeee1753 100644 --- a/modules/playground/src/web_workers/animations/background_index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/animations/index.html b/modules/playground/src/web_workers/animations/index.html index 83a75c9deb8..ba9acea5ab3 100644 --- a/modules/playground/src/web_workers/animations/index.html +++ b/modules/playground/src/web_workers/animations/index.html @@ -9,6 +9,5 @@ - diff --git a/modules/playground/src/web_workers/animations/index.ts b/modules/playground/src/web_workers/animations/index.ts index b45021b6fc1..c43aa4aaff9 100644 --- a/modules/playground/src/web_workers/animations/index.ts +++ b/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'); diff --git a/modules/playground/src/web_workers/animations/loader.js b/modules/playground/src/web_workers/animations/loader.js index 8a08c89ec53..b400e24f64a 100644 --- a/modules/playground/src/web_workers/animations/loader.js +++ b/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)); diff --git a/modules/playground/src/web_workers/images/BUILD.bazel b/modules/playground/src/web_workers/images/BUILD.bazel new file mode 100644 index 00000000000..ac55241eb79 --- /dev/null +++ b/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"], +) diff --git a/modules/playground/src/web_workers/images/background_index.ts b/modules/playground/src/web_workers/images/background_index.ts index 8f9459e418d..564d9bad8e8 100644 --- a/modules/playground/src/web_workers/images/background_index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/images/index.html b/modules/playground/src/web_workers/images/index.html index 68736e91b79..a6a3df0f519 100644 --- a/modules/playground/src/web_workers/images/index.html +++ b/modules/playground/src/web_workers/images/index.html @@ -6,8 +6,6 @@ - - diff --git a/modules/playground/src/web_workers/images/index.ts b/modules/playground/src/web_workers/images/index.ts index b45021b6fc1..c43aa4aaff9 100644 --- a/modules/playground/src/web_workers/images/index.ts +++ b/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'); diff --git a/modules/playground/src/web_workers/images/loader.js b/modules/playground/src/web_workers/images/loader.js index 45b9d28a56a..3612f5426f1 100644 --- a/modules/playground/src/web_workers/images/loader.js +++ b/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)); diff --git a/modules/playground/src/web_workers/images/services/bitmap.ts b/modules/playground/src/web_workers/images/services/bitmap.ts index 89e551b9467..6c03ab8b41c 100644 --- a/modules/playground/src/web_workers/images/services/bitmap.ts +++ b/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 diff --git a/modules/playground/src/web_workers/input/BUILD.bazel b/modules/playground/src/web_workers/input/BUILD.bazel new file mode 100644 index 00000000000..2d714d76f15 --- /dev/null +++ b/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"], +) diff --git a/modules/playground/src/web_workers/input/background_index.ts b/modules/playground/src/web_workers/input/background_index.ts index d05ec704391..b820bbd85f8 100644 --- a/modules/playground/src/web_workers/input/background_index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/input/index.html b/modules/playground/src/web_workers/input/index.html index 80dfbcbc729..ffa2e1662f5 100644 --- a/modules/playground/src/web_workers/input/index.html +++ b/modules/playground/src/web_workers/input/index.html @@ -7,7 +7,5 @@ Loading... - - diff --git a/modules/playground/src/web_workers/input/index.ts b/modules/playground/src/web_workers/input/index.ts index b45021b6fc1..c43aa4aaff9 100644 --- a/modules/playground/src/web_workers/input/index.ts +++ b/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'); diff --git a/modules/playground/src/web_workers/input/loader.js b/modules/playground/src/web_workers/input/loader.js index bf3769999be..b400e24f64a 100644 --- a/modules/playground/src/web_workers/input/loader.js +++ b/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)); diff --git a/modules/playground/src/web_workers/kitchen_sink/BUILD.bazel b/modules/playground/src/web_workers/kitchen_sink/BUILD.bazel new file mode 100644 index 00000000000..768d4dec31f --- /dev/null +++ b/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"], +) diff --git a/modules/playground/src/web_workers/kitchen_sink/background_index.ts b/modules/playground/src/web_workers/kitchen_sink/background_index.ts index a2ea51650c7..e23048eeb19 100644 --- a/modules/playground/src/web_workers/kitchen_sink/background_index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/kitchen_sink/index.html b/modules/playground/src/web_workers/kitchen_sink/index.html index 793df34e11a..aab3329a434 100644 --- a/modules/playground/src/web_workers/kitchen_sink/index.html +++ b/modules/playground/src/web_workers/kitchen_sink/index.html @@ -20,7 +20,5 @@ Loading... - - diff --git a/modules/playground/src/web_workers/kitchen_sink/index.ts b/modules/playground/src/web_workers/kitchen_sink/index.ts index b45021b6fc1..c43aa4aaff9 100644 --- a/modules/playground/src/web_workers/kitchen_sink/index.ts +++ b/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'); diff --git a/modules/playground/src/web_workers/kitchen_sink/loader.js b/modules/playground/src/web_workers/kitchen_sink/loader.js index 0294f2e6853..b400e24f64a 100644 --- a/modules/playground/src/web_workers/kitchen_sink/loader.js +++ b/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)); diff --git a/modules/playground/src/web_workers/message_broker/BUILD.bazel b/modules/playground/src/web_workers/message_broker/BUILD.bazel new file mode 100644 index 00000000000..0f2dda548d0 --- /dev/null +++ b/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"], +) diff --git a/modules/playground/src/web_workers/message_broker/background_index.ts b/modules/playground/src/web_workers/message_broker/background_index.ts index df555d60a3c..8ca4ba8578d 100644 --- a/modules/playground/src/web_workers/message_broker/background_index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/message_broker/index.html b/modules/playground/src/web_workers/message_broker/index.html index 40450e78dda..61d08aec079 100644 --- a/modules/playground/src/web_workers/message_broker/index.html +++ b/modules/playground/src/web_workers/message_broker/index.html @@ -7,6 +7,5 @@

- diff --git a/modules/playground/src/web_workers/message_broker/index.ts b/modules/playground/src/web_workers/message_broker/index.ts index 4d14bd5d62e..0f6979eecea 100644 --- a/modules/playground/src/web_workers/message_broker/index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/message_broker/loader.js b/modules/playground/src/web_workers/message_broker/loader.js index f0233db683d..b400e24f64a 100644 --- a/modules/playground/src/web_workers/message_broker/loader.js +++ b/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)); diff --git a/modules/playground/src/web_workers/router/BUILD.bazel b/modules/playground/src/web_workers/router/BUILD.bazel new file mode 100644 index 00000000000..65947a089e9 --- /dev/null +++ b/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"], +) diff --git a/modules/playground/src/web_workers/router/background_index.ts b/modules/playground/src/web_workers/router/background_index.ts index c60355187d4..60bf59440cb 100644 --- a/modules/playground/src/web_workers/router/background_index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/router/index.html b/modules/playground/src/web_workers/router/index.html index 36d69ed15fb..64395a07330 100644 --- a/modules/playground/src/web_workers/router/index.html +++ b/modules/playground/src/web_workers/router/index.html @@ -3,6 +3,5 @@ Web Worker Router Example - diff --git a/modules/playground/src/web_workers/router/index.ts b/modules/playground/src/web_workers/router/index.ts index bc138f7a99a..78855324727 100644 --- a/modules/playground/src/web_workers/router/index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/router/loader.js b/modules/playground/src/web_workers/router/loader.js index bd2db3c56b0..b400e24f64a 100644 --- a/modules/playground/src/web_workers/router/loader.js +++ b/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)); diff --git a/modules/playground/src/web_workers/todo/BUILD.bazel b/modules/playground/src/web_workers/todo/BUILD.bazel new file mode 100644 index 00000000000..e2f428ffe8f --- /dev/null +++ b/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"], +) diff --git a/modules/playground/src/web_workers/todo/background_index.ts b/modules/playground/src/web_workers/todo/background_index.ts index 190431081aa..77d1882b3a7 100644 --- a/modules/playground/src/web_workers/todo/background_index.ts +++ b/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); diff --git a/modules/playground/src/web_workers/todo/index.html b/modules/playground/src/web_workers/todo/index.html index 699655ded7d..e4fac7623f2 100644 --- a/modules/playground/src/web_workers/todo/index.html +++ b/modules/playground/src/web_workers/todo/index.html @@ -6,8 +6,5 @@ Loading... - - - diff --git a/modules/playground/src/web_workers/todo/index.ts b/modules/playground/src/web_workers/todo/index.ts index b45021b6fc1..c43aa4aaff9 100644 --- a/modules/playground/src/web_workers/todo/index.ts +++ b/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'); diff --git a/modules/playground/src/web_workers/todo/loader.js b/modules/playground/src/web_workers/todo/loader.js index ec8ef7186d8..b400e24f64a 100644 --- a/modules/playground/src/web_workers/todo/loader.js +++ b/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)); diff --git a/modules/playground/src/web_workers/worker-configure.js b/modules/playground/src/web_workers/worker-configure.js new file mode 100644 index 00000000000..96041039ec1 --- /dev/null +++ b/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'); diff --git a/modules/playground/src/web_workers/worker-systemjs-configure.ts b/modules/playground/src/web_workers/worker-systemjs-configure.ts deleted file mode 100644 index 997d4f63260..00000000000 --- a/modules/playground/src/web_workers/worker-systemjs-configure.ts +++ /dev/null @@ -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 -}); diff --git a/modules/playground/src/zippy_component/BUILD.bazel b/modules/playground/src/zippy_component/BUILD.bazel new file mode 100644 index 00000000000..ef9365420f5 --- /dev/null +++ b/modules/playground/src/zippy_component/BUILD.bazel @@ -0,0 +1,31 @@ +load("//tools:defaults.bzl", "ng_module") +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") + +package(default_visibility = ["//modules/playground:__subpackages__"]) + +ng_module( + name = "zippy_component", + srcs = glob(["**/*.ts"]), + assets = glob(["**/*.html"]), + tsconfig = "//modules/playground:tsconfig-build.json", + # TODO: FW-1004 Type checking is currently not complete. + type_check = False, + deps = [ + "//packages/core", + "//packages/platform-browser", + "//packages/platform-browser-dynamic", + ], +) + +ts_devserver( + name = "devserver", + entry_module = "angular/modules/playground/src/zippy_component/index", + index_html = "index.html", + port = 4200, + scripts = ["@ngdeps//node_modules/tslib:tslib.js"], + static_files = [ + "@ngdeps//node_modules/zone.js:dist/zone.js", + "@ngdeps//node_modules/reflect-metadata:Reflect.js", + ], + deps = [":zippy_component"], +) diff --git a/modules/playground/src/zippy_component/app/zippy.ts b/modules/playground/src/zippy_component/app/zippy.ts index dd738bae1dd..e005090fa8d 100644 --- a/modules/playground/src/zippy_component/app/zippy.ts +++ b/modules/playground/src/zippy_component/app/zippy.ts @@ -8,7 +8,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; -@Component({selector: 'zippy', templateUrl: 'app/zippy.html'}) +@Component({selector: 'zippy', templateUrl: './zippy.html'}) export class Zippy { visible: boolean = true; @Input() title: string = ''; diff --git a/modules/playground/src/zippy_component/index.html b/modules/playground/src/zippy_component/index.html index 3310e15eb04..de656ac6660 100644 --- a/modules/playground/src/zippy_component/index.html +++ b/modules/playground/src/zippy_component/index.html @@ -5,7 +5,5 @@ Loading... - - diff --git a/modules/playground/src/zippy_component/index.ts b/modules/playground/src/zippy_component/index.ts index 5e17f1b2256..00ede4cd6ca 100644 --- a/modules/playground/src/zippy_component/index.ts +++ b/modules/playground/src/zippy_component/index.ts @@ -23,16 +23,14 @@ import {Zippy} from './app/zippy'; ` }) -class ZippyApp { +export class ZippyApp { logs: string[] = []; pushLog(log: string) { this.logs.push(log); } } @NgModule({declarations: [ZippyApp, Zippy], bootstrap: [ZippyApp], imports: [BrowserModule]}) -class ExampleModule { +export class ExampleModule { } -export function main() { - platformBrowserDynamic().bootstrapModule(ExampleModule); -} +platformBrowserDynamic().bootstrapModule(ExampleModule); diff --git a/modules/playground/systemjs-config.js b/modules/playground/systemjs-config.js new file mode 100644 index 00000000000..a9f4c0b75d0 --- /dev/null +++ b/modules/playground/systemjs-config.js @@ -0,0 +1,49 @@ +/** + * @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 + */ + +// Normally the Bazel "ts_devserver" automatically handles the module resolution of +// dependencies in the browser using RequireJS, but there are various examples that +// use SystemJS (e.g. for lazy loading, web workers) and therefore we want to avoid +// repeating the basic configuration by providing this as a general SystemJS config. + +const angularPackages = [ + 'common', + 'animations', + 'platform-browser/animations', + 'compiler', + 'core', + 'forms', + 'http', + 'platform-browser', + 'platform-browser-dynamic', + 'platform-webworker', + 'platform-webworker-dynamic', + 'router', + 'upgrade', + 'upgrade/static', +]; + +const packagesConfig = {}; +const mapConfig = { + 'tslib': 'ngdeps/node_modules/tslib/tslib.js', + 'rxjs': 'ngdeps/node_modules/rxjs/bundles/rxjs.umd.js', + 'rxjs/operators': 'angular/modules/playground/systemjs-rxjs-operators.js', +}; + +angularPackages.forEach(pkgName => { + mapConfig[`@angular/${pkgName}`] = `angular/packages/${pkgName}`; + packagesConfig[`@angular/${pkgName}`] = { + main: 'index.js', + defaultExtension: 'js', + }; +}); + +System.config({ + map: mapConfig, + packages: packagesConfig, +}); diff --git a/modules/playground/systemjs-rxjs-operators.js b/modules/playground/systemjs-rxjs-operators.js new file mode 100644 index 00000000000..eddff384715 --- /dev/null +++ b/modules/playground/systemjs-rxjs-operators.js @@ -0,0 +1,20 @@ +/** + * @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 + */ + +// 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. + +if (typeof define === 'function' && define.amd) { + define(['exports', 'rxjs'], (exports, rxjs) => { + // Re-export all operators in this AMD module. + Object.assign(exports, rxjs.operators); + }); +} diff --git a/modules/playground/tsconfig-build.json b/modules/playground/tsconfig-build.json new file mode 100644 index 00000000000..d18dc325ccc --- /dev/null +++ b/modules/playground/tsconfig-build.json @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "lib": ["dom", "es2015"], + "types": [] + } +} diff --git a/modules/tsconfig.json b/modules/tsconfig.json index 5dedb93d0ef..868a5373271 100644 --- a/modules/tsconfig.json +++ b/modules/tsconfig.json @@ -28,6 +28,7 @@ "benchmarks/src/old", "benchmarks/src/**/index_aot.ts", "benchmarks_external", + "playground", "payload_tests" ], "angularCompilerOptions": { diff --git a/package.json b/package.json index f1a46bf3b28..30e85eedfb3 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@bazel/typescript": "0.22.1-7-g68fed6a", "@schematics/angular": "^7.0.4", "@types/angular": "^1.6.47", + "@types/base64-js": "1.2.5", "@types/chokidar": "1.7.3", "@types/convert-source-map": "^1.5.1", "@types/diff": "^3.2.2", @@ -67,6 +68,7 @@ "diff": "^3.5.0", "domino": "2.1.0", "fs-extra": "4.0.2", + "hammerjs": "2.0.8", "jasmine": "^3.1.0", "jasmine-core": "^3.1.0", "karma": "^3.1.4", @@ -83,6 +85,7 @@ "shelljs": "^0.8.1", "source-map": "^0.6.1", "source-map-support": "0.5.9", + "systemjs": "0.18.10", "tsickle": "0.34.0", "tslib": "^1.9.0", "typescript": "~3.2.2", @@ -100,7 +103,6 @@ "@bazel/bazel": "~0.22.0", "@bazel/buildifier": "^0.19.2", "@bazel/ibazel": "~0.9.0", - "@types/base64-js": "1.2.5", "@types/minimist": "^1.2.0", "@types/systemjs": "0.19.32", "browserstacktunnel-wrapper": "2.0.1", @@ -121,7 +123,6 @@ "gulp-filter": "^5.1.0", "gulp-git": "^2.7.0", "gulp-tslint": "8.1.2", - "hammerjs": "2.0.8", "husky": "^0.14.3", "incremental-dom": "0.4.1", "jpm": "1.3.1", @@ -137,7 +138,6 @@ "rxjs": "^6.3.0", "sauce-connect": "https://saucelabs.com/downloads/sc-4.5.3-linux.tar.gz", "semver": "5.4.1", - "systemjs": "0.18.10", "tslint": "5.7.0", "tslint-eslint-rules": "4.1.1", "tsutils": "2.27.2",