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 0000000000..45e5be832f --- /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 213a5faafb..50172f008d 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 0000000000..de99d38015 --- /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 0dba74ec69..273fa54415 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 acaaacef31..f4591b33e0 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 68ef663588..8d9e09bd2c 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 0000000000..7d81f1bd66 --- /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 64f40da63a..5d56cfbef2 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 a476f9da80..d3405212e0 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 0000000000..3816a88355 --- /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 92daa49b1d..0000000000 --- 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 0000000000..b96fd250d7 --- /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 746684c1e9..fe941f1e00 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 29d099f5e7..2dbc531eb6 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 0000000000..1a89868573 --- /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 6e75312ae1..3bac186b20 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 2478447c93..b6f14994ed 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 0000000000..676990e4e2 --- /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 fa19f65ec4..229d9303f3 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 9fbc084118..19672e8b54 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 0000000000..2cf58c5573 --- /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 e4fadcf643..5ea6a289d7 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 b840bf025f..c9e6501b8a 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 0000000000..08b0584912 --- /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 70b7f5fc43..99d1babc80 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 116c3ce4be..e73aaf437b 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 0000000000..24058d1e94 --- /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 366507deef..fcc8603b8d 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 ebb78850a3..b71d22cf76 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 0000000000..12b0eed56d --- /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 52098d69d0..21a1f48317 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 ad1a247503..b83b10b9f1 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 0000000000..55d66aa41c --- /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 905b2b2577..13569410aa 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 bc867189c3..3638ccecff 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 0000000000..faa1534bfb --- /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 77e6fb1092..e7d1b4c8ad 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 20bd353c1f..2bebbe2b2e 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 43894d02a7..91aa4e1c78 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 0000000000..17a69550c9 --- /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 86bf0cb7f6..2d87ef3719 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 584ccc9e80..d59ccd0e0c 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 af8373bec0..70b2bcb553 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 7d066f8cf3..414edae61c 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 0000000000..2be58f2f55 --- /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 df1c7280a6..17620bf5cf 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 0000000000..0865ca9ceb --- /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 d1981b2a7e..b16b2d6006 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 497f88e2d9..2a0622683d 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 0000000000..b7da7a0c7f --- /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 f74683b943..fb0d1490d9 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 82fa5bcc48..a914351711 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 0000000000..23d1a5d73f --- /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 19eb778b98..76bb1fdb79 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 eae084b6f2..e5c316370b 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 0000000000..bcc454ac4b --- /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 7f38ed0bf6..9a519073ef 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 6e8d91773a..3e6526cf94 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 6799ec7569..1a1b8d2cbb 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 0000000000..c30cbc0089 --- /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 499a7be8fa..0851d9079d 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 7eb2fffa9d..809d004a88 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 0000000000..03a0fd21d9 --- /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 0000000000..35138500ea --- /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 7f541be763..d6beeee175 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 83a75c9deb..ba9acea5ab 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 b45021b6fc..c43aa4aaff 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 8a08c89ec5..b400e24f64 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 0000000000..ac55241eb7 --- /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 8f9459e418..564d9bad8e 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 68736e91b7..a6a3df0f51 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 b45021b6fc..c43aa4aaff 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 45b9d28a56..3612f5426f 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 89e551b946..6c03ab8b41 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 0000000000..2d714d76f1 --- /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 d05ec70439..b820bbd85f 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 80dfbcbc72..ffa2e1662f 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 b45021b6fc..c43aa4aaff 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 bf3769999b..b400e24f64 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 0000000000..768d4dec31 --- /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 a2ea51650c..e23048eeb1 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 793df34e11..aab3329a43 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 b45021b6fc..c43aa4aaff 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 0294f2e685..b400e24f64 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 0000000000..0f2dda548d --- /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 df555d60a3..8ca4ba8578 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 40450e78dd..61d08aec07 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 4d14bd5d62..0f6979eece 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 f0233db683..b400e24f64 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 0000000000..65947a089e --- /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 c60355187d..60bf59440c 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 36d69ed15f..64395a0733 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 bc138f7a99..7885532472 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 bd2db3c56b..b400e24f64 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 0000000000..e2f428ffe8 --- /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 190431081a..77d1882b3a 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 699655ded7..e4fac7623f 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 b45021b6fc..c43aa4aaff 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 ec8ef7186d..b400e24f64 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 0000000000..96041039ec --- /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 997d4f6326..0000000000 --- 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 0000000000..ef9365420f --- /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 dd738bae1d..e005090fa8 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 3310e15eb0..de656ac666 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 5e17f1b225..00ede4cd6c 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 0000000000..a9f4c0b75d --- /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 0000000000..eddff38471 --- /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 0000000000..d18dc325cc --- /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 5dedb93d0e..868a537327 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 f1a46bf3b2..30e85eedfb 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",