iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build: switch playground examples to bazel (#28490)

Browse Source 
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
This commit is contained in:
Paul Gschwendtner
2019-02-01 14:27:13 +01:00
committed by Matias Niemelä
parent b7738ef9e4
commit e4fb93c28a
110 changed files with 1135 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/playground/BUILD.bazel
+6
View File
@@ -0,0 +1,6 @@
exports_files([
"tsconfig-build.json",
"tsconfig-e2e.json",
"systemjs-config.js",
"systemjs-rxjs-operators.js",
])
modules/playground/README.md
+10 -6
View File
@@ -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
```
modules/playground/src/animate/BUILD.bazel
+32
View File
@@ -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"],
)
modules/playground/src/animate/app/animate-app.ts
+1 -1
View File
@@ -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: `
<button (click)="state='start'">Start State</button>
<button (click)="state='active'">Active State</button>
modules/playground/src/animate/index.html
-1
View File
@@ -15,6 +15,5 @@
</style>
<body>
<animate-app>Loading...</animate-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/animate/index.ts
+2 -4
View File
@@ -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);
modules/playground/src/async/BUILD.bazel
+30
View File
@@ -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"],
)
modules/playground/src/async/index.html
-2
View File
@@ -8,7 +8,5 @@
<async-app>
Loading...
</async-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/async/index.ts
+1 -3
View File
@@ -103,6 +103,4 @@ class AsyncApplication {
class ExampleModule {
}
export function main() {
platformBrowserDynamic().bootstrapModule(ExampleModule);
}
platformBrowserDynamic().bootstrapModule(ExampleModule);
modules/playground/src/benchpress/BUILD.bazel
+9
View File
@@ -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,
)
modules/playground/src/bootstrap.ts
-102
View File
@@ -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(`<script src="${scriptUrl}" onload="${onload}"></script>`);
}
}(window));
modules/playground/src/gestures/BUILD.bazel
+32
View File
@@ -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"],
)
modules/playground/src/gestures/index.html
-3
View File
@@ -14,8 +14,5 @@
</head>
<body>
<gestures-app></gestures-app>
<script src="/all/playground/vendor/hammer.js"></script>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/gestures/index.ts
+1 -3
View File
@@ -27,6 +27,4 @@ class GesturesCmp {
class ExampleModule {
}
export function main() {
platformBrowserDynamic().bootstrapModule(ExampleModule);
}
platformBrowserDynamic().bootstrapModule(ExampleModule);
modules/playground/src/hello_world/BUILD.bazel
+30
View File
@@ -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"],
)
modules/playground/src/hello_world/index.html
-2
View File
@@ -5,7 +5,5 @@
<hello-app>
Loading...
</hello-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/hello_world/index.ts
+3 -5
View File
@@ -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);
modules/playground/src/http/BUILD.bazel
+32
View File
@@ -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"],
)
modules/playground/src/http/index.html
-2
View File
@@ -5,7 +5,5 @@
<http-app>
Loading...
</http-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/http/index.ts
+2 -4
View File
@@ -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);
modules/playground/src/jsonp/BUILD.bazel
+32
View File
@@ -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"],
)
modules/playground/src/jsonp/index.html
-2
View File
@@ -5,7 +5,5 @@
<jsonp-app>
Loading...
</jsonp-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/jsonp/index.ts
+2 -4
View File
@@ -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);
modules/playground/src/key_events/BUILD.bazel
+30
View File
@@ -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"],
)
modules/playground/src/key_events/index.html
-2
View File
@@ -20,7 +20,5 @@
<key-events-app>
Loading...
</key-events-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/key_events/index.ts
+3 -5
View File
@@ -22,7 +22,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
tabindex="0"
>{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>`
})
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);
modules/playground/src/model_driven_forms/BUILD.bazel
+31
View File
@@ -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"],
)
modules/playground/src/model_driven_forms/index.html
-2
View File
@@ -13,7 +13,5 @@
<reactive-forms>
Loading...
</reactive-forms>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/model_driven_forms/index.ts
+4 -6
View File
@@ -47,7 +47,7 @@ function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
<span *ngIf="errorMessage !== null">{{errorMessage}}</span>
`
})
class ShowError {
export class ShowError {
formDir: FormGroupDirective;
controlPath: string;
errorTypes: string[];
@@ -136,7 +136,7 @@ class ShowError {
</form>
`
})
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);
modules/playground/src/order_management/BUILD.bazel
+31
View File
@@ -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"],
)
modules/playground/src/order_management/index.html
-2
View File
@@ -13,7 +13,5 @@
<order-management-app>
Loading...
</order-management-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/order_management/index.ts
+7 -9
View File
@@ -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 {
</div>
`
})
class OrderListComponent {
export class OrderListComponent {
orders: Order[];
constructor(private _service: DataService) { this.orders = _service.orders; }
@@ -137,7 +137,7 @@ class OrderListComponent {
</div>
`
})
class OrderItemComponent {
export class OrderItemComponent {
@Input() item: OrderItem;
@Output() delete = new EventEmitter();
@@ -173,7 +173,7 @@ class OrderItemComponent {
</div>
`
})
class OrderDetailsComponent {
export class OrderDetailsComponent {
constructor(private _service: DataService) {}
get order(): Order { return this._service.currentOrder; }
@@ -191,7 +191,7 @@ class OrderDetailsComponent {
<order-details-cmp></order-details-cmp>
`
})
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);
modules/playground/src/person_management/BUILD.bazel
+31
View File
@@ -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"],
)
modules/playground/src/person_management/index.html
-2
View File
@@ -13,7 +13,5 @@
<person-management-app>
Loading...
</person-management-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/person_management/index.ts
+7 -9
View File
@@ -45,7 +45,7 @@ class Person {
// ---- services
@Injectable()
class DataService {
export class DataService {
currentPerson: Person;
persons: Person[];
@@ -102,7 +102,7 @@ class DataService {
</div>
`
})
class FullNameComponent {
export class FullNameComponent {
constructor(private _service: DataService) {}
get person(): Person { return this._service.currentPerson; }
}
@@ -149,7 +149,7 @@ class FullNameComponent {
</div>
`
})
class PersonsDetailComponent {
export class PersonsDetailComponent {
constructor(private _service: DataService) {}
get person(): Person { return this._service.currentPerson; }
}
@@ -169,7 +169,7 @@ class PersonsDetailComponent {
</div>
`
})
class PersonsComponent {
export class PersonsComponent {
persons: Person[];
constructor(private _service: DataService) { this.persons = _service.persons; }
@@ -189,7 +189,7 @@ class PersonsComponent {
<persons-cmp *ngIf="mode == 'personList'"></persons-cmp>
`
})
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);
modules/playground/src/relative_assets/BUILD.bazel
+39
View File
@@ -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"],
)
modules/playground/src/relative_assets/app/my_cmp.ts
+9
View File
@@ -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.
/// <amd-dependency path="module" name="module"/>
// 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.
/// <reference types="node" />
import {Component} from '@angular/core';
@Component(
{selector: 'my-cmp', templateUrl: 'tpl.html', styleUrls: ['style.css'], moduleId: module.id})
export class MyCmp {
modules/playground/src/relative_assets/index.html
-2
View File
@@ -5,7 +5,5 @@
<relative-app>
Loading...
</relative-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/relative_assets/index.ts
+3 -5
View File
@@ -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 = <my-cmp></my-cmp>`,
@@ -24,5 +20,7 @@ export class RelativeApp {
}
@NgModule({declarations: [RelativeApp, MyCmp], bootstrap: [RelativeApp], imports: [BrowserModule]})
class ExampleModule {
export class ExampleModule {
}
platformBrowserDynamic().bootstrapModule(ExampleModule);
modules/playground/src/routing/BUILD.bazel
+40
View File
@@ -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"],
)
modules/playground/src/routing/app/inbox-app.ts
+5 -5
View File
@@ -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 {
}
modules/playground/src/routing/app/inbox-detail.ts
+2 -2
View File
@@ -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) {
modules/playground/src/routing/css/gumby.css
+1 -1
View File
@@ -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
* ---------------
modules/playground/src/routing/index.html
+11 -3
View File
@@ -3,12 +3,20 @@
<title>Routing Example</title>
<link rel="stylesheet" type="text/css" href="./css/gumby.css">
<link rel="stylesheet" type="text/css" href="./css/app.css">
<base href="/all/playground/src/routing/">
<base href="/">
<body>
<inbox-app>
Loading...
</inbox-app>
<script src="../bootstrap.js"></script>
</body>
<!--
We are manually loading the scripts because we don't use ConcatJS for this example.
This is because we want to use SystemJS instead of RequireJS and want to support
lazy loading of routes. Read more in the "load-app.js" file.
-->
<script src="ngdeps/node_modules/zone.js/dist/zone.js"></script>
<script src="ngdeps/node_modules/reflect-metadata/Reflect.js"></script>
<script src="ngdeps/node_modules/systemjs/dist/system.js"></script>
<script src="angular/modules/playground/systemjs-config.js"></script>
<script src="load-app.js"></script>
</html>
modules/playground/src/routing/load-app.js
+22
View File
@@ -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));
modules/playground/src/routing/index.ts → modules/playground/src/routing/main.ts
+9 -10
View File
@@ -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);
modules/playground/src/sourcemap/BUILD.bazel
+34
View File
@@ -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"],
)
modules/playground/src/sourcemap/index.html
-2
View File
@@ -10,7 +10,5 @@
Please look into the console and check whether the stack trace is mapped
via source maps!
</p>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/sourcemap/index.ts
+2 -4
View File
@@ -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);
modules/playground/src/svg/BUILD.bazel
+30
View File
@@ -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"],
)
modules/playground/src/svg/index.html
-1
View File
@@ -5,6 +5,5 @@
<svg-app>
Loading...
</svg-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/svg/index.ts
+4 -6
View File
@@ -11,7 +11,7 @@ import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@Component({selector: '[svg-group]', template: `<svg:text x="20" y="20">Hello</svg:text>`})
class SvgGroup {
export class SvgGroup {
}
@Component({
@@ -20,13 +20,11 @@ class SvgGroup {
<g svg-group></g>
</svg>`
})
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);
modules/playground/src/template_driven_forms/BUILD.bazel
+31
View File
@@ -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"],
)
modules/playground/src/template_driven_forms/index.html
-2
View File
@@ -13,7 +13,5 @@
<template-driven-forms>
Loading...
</template-driven-forms>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/template_driven_forms/index.ts
+7 -9
View File
@@ -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 {
<span *ngIf="errorMessage !== null">{{errorMessage}}</span>
`
})
class ShowError {
export class ShowError {
formDir: NgForm;
controlPath: string;
errorTypes: string[];
@@ -161,7 +161,7 @@ class ShowError {
</form>
`
})
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);
modules/playground/src/todo/BUILD.bazel
+31
View File
@@ -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"],
)
modules/playground/src/todo/index.html
-3
View File
@@ -7,8 +7,5 @@
<todo-app>
Loading...
</todo-app>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/todo/index.ts
+3 -5
View File
@@ -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<Todo>, 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);
modules/playground/src/todo/todo.html
+1 -1
View File
@@ -67,5 +67,5 @@
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://twitter.com/angularjs">The Angular Team</a></p>
<p>Created by <a href="http://twitter.com/angular">The Angular Team</a></p>
</footer>
modules/playground/src/upgrade/BUILD.bazel
+31
View File
@@ -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"],
)
modules/playground/src/upgrade/index.html
-2
View File
@@ -16,7 +16,5 @@
<hr>
<span class="greeting">Greetings from {{name}}!</span>
</upgrade-app>
<script src="/all/playground/vendor/angular.js"></script>
<script src="../bootstrap.js"></script>
</body>
</html>
modules/playground/src/upgrade/index.ts
+5 -7
View File
@@ -50,7 +50,7 @@ ng1module.directive('ng1User', function() {
</div>`,
styles: styles
})
class Pane {
export class Pane {
@Input() title: string;
}
@@ -69,7 +69,7 @@ class Pane {
</div>`,
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']);
modules/playground/src/web_workers/BUILD.bazel
+13
View File
@@ -0,0 +1,13 @@
package(default_visibility = ["//visibility:public"])
filegroup(
name = "worker-config",
srcs = ["worker-configure.js"],
data = [
"//modules/playground:systemjs-config.js",
"//modules/playground:systemjs-rxjs-operators.js",
"@ngdeps//reflect-metadata",
"@ngdeps//systemjs",
"@ngdeps//zone.js",
],
)
modules/playground/src/web_workers/animations/BUILD.bazel
+34
View File
@@ -0,0 +1,34 @@
load("//tools:defaults.bzl", "ng_module")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "animations",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
# TODO: FW-1004 Type checking is currently not complete.
type_check = False,
deps = [
"//packages/animations",
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
data = [
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
"@ngdeps//node_modules/tslib:tslib.js",
],
entry_module = "angular/modules/playground/src/web_workers/animations/index",
index_html = "index.html",
port = 4200,
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
deps = [":animations"],
)
modules/playground/src/web_workers/animations/background_index.ts
+2 -4
View File
@@ -13,9 +13,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {AnimationCmp} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [AnimationCmp], declarations: [AnimationCmp]})
class ExampleModule {
export class ExampleModule {
}
export function main() {
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
modules/playground/src/web_workers/animations/index.html
-1
View File
@@ -9,6 +9,5 @@
</animation-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations-next-lite.min.js"></script>
<script src="../../bootstrap.js"></script>
</body>
</html>
modules/playground/src/web_workers/animations/index.ts
+1 -3
View File
@@ -8,6 +8,4 @@
import {bootstrapWorkerUi} from '@angular/platform-webworker';
export function main() {
bootstrapWorkerUi('loader.js');
}
bootstrapWorkerUi('loader.js');
modules/playground/src/web_workers/animations/loader.js
+5 -15
View File
@@ -6,19 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
importScripts(
'../../../vendor/core.js', '../../../vendor/zone.js',
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
'../../../vendor/Reflect.js');
importScripts('../worker-systemjs-configure.js');
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.import('playground/src/web_workers/animations/background_index')
.then(
function(m) {
try {
m.main();
} catch (e) {
console.error(e);
}
},
function(error) { console.error('error loading background', error); });
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));
modules/playground/src/web_workers/images/BUILD.bazel
+35
View File
@@ -0,0 +1,35 @@
load("//tools:defaults.bzl", "ng_module")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "images",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
# TODO: FW-1004 Type checking is currently not complete.
type_check = False,
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
"@ngdeps//@types/base64-js",
],
)
ts_devserver(
name = "devserver",
data = [
"//modules/playground/src/web_workers:worker-config",
"@ngdeps//node_modules/base64-js:base64js.min.js",
"@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
"@ngdeps//node_modules/tslib:tslib.js",
"loader.js",
] + glob(["**/*.css"]),
entry_module = "angular/modules/playground/src/web_workers/images/index",
index_html = "index.html",
port = 4200,
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
deps = [":images"],
)
modules/playground/src/web_workers/images/background_index.ts
+2 -4
View File
@@ -13,9 +13,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {ImageDemo} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [ImageDemo], declarations: [ImageDemo]})
class ExampleModule {
export class ExampleModule {
}
export function main() {
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
modules/playground/src/web_workers/images/index.html
-2
View File
@@ -6,8 +6,6 @@
<body>
<image-demo>
</image-demo>
<script src="../../bootstrap.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
modules/playground/src/web_workers/images/index.ts
+1 -3
View File
@@ -8,6 +8,4 @@
import {bootstrapWorkerUi} from '@angular/platform-webworker';
export function main() {
bootstrapWorkerUi('loader.js');
}
bootstrapWorkerUi('loader.js');
modules/playground/src/web_workers/images/loader.js
+10 -15
View File
@@ -6,19 +6,14 @@
* found in the LICENSE file at https://angular.io/license
*/
importScripts(
'../../../vendor/core.js', '../../../vendor/zone.js',
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
'../../../vendor/Reflect.js');
importScripts('../worker-systemjs-configure.js');
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.import('playground/src/web_workers/images/background_index')
.then(
function(m) {
try {
m.main();
} catch (e) {
console.error(e);
}
},
function(error) { console.error('error loading background', error); });
System.config({
map: {
'base64-js': 'ngdeps/node_modules/base64-js/base64js.min.js',
},
packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}
});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));
modules/playground/src/web_workers/images/services/bitmap.ts
+1 -1
View File
@@ -35,7 +35,7 @@ export class BitmapService {
toDataUri(imageData: ImageData): string {
const header = this._createBMPHeader(imageData);
imageData = this._imageDataToBMP(imageData);
return 'data:image/bmp;base64,' + btoa(header) + fromByteArray(imageData.data);
return 'data:image/bmp;base64,' + btoa(header) + fromByteArray(Uint8Array.from(imageData.data));
}
// converts a .bmp file ArrayBuffer to a dataURI
modules/playground/src/web_workers/input/BUILD.bazel
+33
View File
@@ -0,0 +1,33 @@
load("//tools:defaults.bzl", "ng_module")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "input",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
# TODO: FW-1004 Type checking is currently not complete.
type_check = False,
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
data = [
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
"@ngdeps//node_modules/tslib:tslib.js",
],
entry_module = "angular/modules/playground/src/web_workers/input/index",
index_html = "index.html",
port = 4200,
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
deps = [":input"],
)
modules/playground/src/web_workers/input/background_index.ts
+2 -4
View File
@@ -13,9 +13,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {InputCmp} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [InputCmp], declarations: [InputCmp]})
class ExampleModule {
export class ExampleModule {
}
export function main() {
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
modules/playground/src/web_workers/input/index.html
-2
View File
@@ -7,7 +7,5 @@
<input-app>
Loading...
</input-app>
<script src="../../bootstrap.js"></script>
</body>
</html>
modules/playground/src/web_workers/input/index.ts
+1 -3
View File
@@ -8,6 +8,4 @@
import {bootstrapWorkerUi} from '@angular/platform-webworker';
export function main() {
bootstrapWorkerUi('loader.js');
}
bootstrapWorkerUi('loader.js');
modules/playground/src/web_workers/input/loader.js
+5 -15
View File
@@ -6,19 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
importScripts(
'../../../vendor/core.js', '../../../vendor/zone.js',
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
'../../../vendor/Reflect.js');
importScripts('../worker-systemjs-configure.js');
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.import('playground/src/web_workers/input/background_index')
.then(
function(m) {
try {
m.main();
} catch (e) {
console.error(e);
}
},
function(error) { console.error('error loading background', error); });
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));
modules/playground/src/web_workers/kitchen_sink/BUILD.bazel
+33
View File
@@ -0,0 +1,33 @@
load("//tools:defaults.bzl", "ng_module")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "kitchen_sink",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
# TODO: FW-1004 Type checking is currently not complete.
type_check = False,
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
data = [
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
"@ngdeps//node_modules/tslib:tslib.js",
],
entry_module = "angular/modules/playground/src/web_workers/kitchen_sink/index",
index_html = "index.html",
port = 4200,
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
deps = [":kitchen_sink"],
)
modules/playground/src/web_workers/kitchen_sink/background_index.ts
+8 -6
View File
@@ -10,12 +10,14 @@ import {NgModule} from '@angular/core';
import {WorkerAppModule} from '@angular/platform-webworker';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {HelloCmp} from './index_common';
import {HelloCmp, RedDec} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [HelloCmp], declarations: [HelloCmp]})
class ExampleModule {
@NgModule({
imports: [WorkerAppModule],
bootstrap: [HelloCmp],
declarations: [HelloCmp, RedDec],
})
export class ExampleModule {
}
export function main() {
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
modules/playground/src/web_workers/kitchen_sink/index.html
-2
View File
@@ -20,7 +20,5 @@
<hello-app>
Loading...
</hello-app>
<script src="../../bootstrap.js"></script>
</body>
</html>
modules/playground/src/web_workers/kitchen_sink/index.ts
+1 -3
View File
@@ -8,6 +8,4 @@
import {bootstrapWorkerUi} from '@angular/platform-webworker';
export function main() {
bootstrapWorkerUi('loader.js');
}
bootstrapWorkerUi('loader.js');
modules/playground/src/web_workers/kitchen_sink/loader.js
+5 -15
View File
@@ -6,19 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
importScripts(
'../../../vendor/core.js', '../../../vendor/zone.js',
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
'../../../vendor/Reflect.js');
importScripts('../worker-systemjs-configure.js');
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.import('playground/src/web_workers/kitchen_sink/background_index')
.then(
function(m) {
try {
m.main();
} catch (e) {
console.error(e);
}
},
function(error) { console.error('error loading background', error); });
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));
modules/playground/src/web_workers/message_broker/BUILD.bazel
+33
View File
@@ -0,0 +1,33 @@
load("//tools:defaults.bzl", "ng_module")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "message_broker",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
# TODO: FW-1004 Type checking is currently not complete.
type_check = False,
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
data = [
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
"@ngdeps//node_modules/tslib:tslib.js",
],
entry_module = "angular/modules/playground/src/web_workers/message_broker/index",
index_html = "index.html",
port = 4200,
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
deps = [":message_broker"],
)
modules/playground/src/web_workers/message_broker/background_index.ts
+2 -4
View File
@@ -13,9 +13,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {App} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [App], declarations: [App]})
class ExampleModule {
export class ExampleModule {
}
export function main() {
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
modules/playground/src/web_workers/message_broker/index.html
-1
View File
@@ -7,6 +7,5 @@
<button type="button" id="send_echo">Send Echo</button>
<p id="echo_result"></p>
<p id="ui_result"></p>
<script src="../../bootstrap.js"></script>
</body>
</html>
modules/playground/src/web_workers/message_broker/index.ts
+2 -4
View File
@@ -11,10 +11,6 @@ import {ClientMessageBrokerFactory, FnArg, SerializerTypes, UiArguments, bootstr
const ECHO_CHANNEL = 'ECHO';
export function main() {
bootstrapWorkerUi('loader.js').then(afterBootstrap);
}
function afterBootstrap(ref: PlatformRef) {
const brokerFactory: ClientMessageBrokerFactory = ref.injector.get(ClientMessageBrokerFactory);
const broker = brokerFactory.createMessageBroker(ECHO_CHANNEL, false);
@@ -32,3 +28,5 @@ function afterBootstrap(ref: PlatformRef) {
});
});
}
bootstrapWorkerUi('loader.js').then(afterBootstrap);
modules/playground/src/web_workers/message_broker/loader.js
+5 -15
View File
@@ -6,19 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
importScripts(
'../../../vendor/core.js', '../../../vendor/zone.js',
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
'../../../vendor/Reflect.js');
importScripts('../worker-systemjs-configure.js');
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.import('playground/src/web_workers/message_broker/background_index')
.then(
function(m) {
try {
m.main();
} catch (e) {
console.error(e);
}
},
function(error) { console.error('error loading background', error); });
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));
modules/playground/src/web_workers/router/BUILD.bazel
+34
View File
@@ -0,0 +1,34 @@
load("//tools:defaults.bzl", "ng_module")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "router",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
# TODO: FW-1004 Type checking is currently not complete.
type_check = False,
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
"//packages/router",
],
)
ts_devserver(
name = "devserver",
data = [
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
"@ngdeps//node_modules/tslib:tslib.js",
],
entry_module = "angular/modules/playground/src/web_workers/router/index",
index_html = "index.html",
port = 4200,
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
deps = [":router"],
)
modules/playground/src/web_workers/router/background_index.ts
+1 -4
View File
@@ -7,9 +7,6 @@
*/
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {AppModule} from './index_common';
export function main() {
platformWorkerAppDynamic().bootstrapModule(AppModule);
}
platformWorkerAppDynamic().bootstrapModule(AppModule);
modules/playground/src/web_workers/router/index.html
-1
View File
@@ -3,6 +3,5 @@
<title>Web Worker Router Example</title>
<body>
<app></app>
<script src="../../bootstrap.js"></script>
</body>
</html>
modules/playground/src/web_workers/router/index.ts
+1 -3
View File
@@ -8,6 +8,4 @@
import {WORKER_UI_LOCATION_PROVIDERS, bootstrapWorkerUi} from '@angular/platform-webworker';
export function main() {
bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);
}
bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);
modules/playground/src/web_workers/router/loader.js
+5 -15
View File
@@ -6,19 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
importScripts(
'../../../vendor/core.js', '../../../vendor/zone.js',
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
'../../../vendor/Reflect.js');
importScripts('../worker-systemjs-configure.js');
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.import('playground/src/web_workers/router/background_index')
.then(
function(m) {
try {
m.main();
} catch (e) {
console.error(e);
}
},
function(error) { console.error('error loading background', error); });
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));
modules/playground/src/web_workers/todo/BUILD.bazel
+35
View File
@@ -0,0 +1,35 @@
load("//tools:defaults.bzl", "ng_module")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "todo",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
# TODO: FW-1004 Type checking is currently not complete.
type_check = False,
deps = [
"//packages/core",
"//packages/forms",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
data = [
"css/main.css",
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
"@ngdeps//node_modules/tslib:tslib.js",
],
entry_module = "angular/modules/playground/src/web_workers/todo/index",
index_html = "index.html",
port = 4200,
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
static_files = ["@ngdeps//node_modules/zone.js:dist/zone.js"],
deps = [":todo"],
)
modules/playground/src/web_workers/todo/background_index.ts
+2 -4
View File
@@ -14,9 +14,7 @@ import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {TodoApp} from './index_common';
@NgModule({imports: [WorkerAppModule, FormsModule], bootstrap: [TodoApp], declarations: [TodoApp]})
class ExampleModule {
export class ExampleModule {
}
export function main() {
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
modules/playground/src/web_workers/todo/index.html
-3
View File
@@ -6,8 +6,5 @@
<todo-app>
Loading...
</todo-app>
<script src="../../bootstrap.js"></script>
</body>
</html>
modules/playground/src/web_workers/todo/index.ts
+1 -3
View File
@@ -8,6 +8,4 @@
import {bootstrapWorkerUi} from '@angular/platform-webworker';
export function main() {
bootstrapWorkerUi('loader.js');
}
bootstrapWorkerUi('loader.js');
modules/playground/src/web_workers/todo/loader.js
+5 -15
View File
@@ -6,19 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
importScripts(
'../../../vendor/core.js', '../../../vendor/zone.js',
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
'../../../vendor/Reflect.js');
importScripts('../worker-systemjs-configure.js');
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.import('playground/src/web_workers/todo/background_index')
.then(
function(m) {
try {
m.main();
} catch (e) {
console.error(e);
}
},
function(error) { console.error('error loading background', error); });
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));
modules/playground/src/web_workers/worker-configure.js
+14
View File
@@ -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');

Some files were not shown because too many files have changed in this diff Show More