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",