honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

build: switch playground examples to bazel (#28490) 

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

PR Close #28490
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/playground/BUILD.bazel Normal file
View File

@ -0,0 +1,6 @@
exports_files([
"tsconfig-build.json",
"tsconfig-e2e.json",
"systemjs-config.js",
"systemjs-rxjs-operators.js",
])

16
modules/playground/README.md
View File

@ -1,8 +1,12 @@
# How to run the examples locally ## How to serve the examples
``` All playground examples are built and served with Bazel. Below is an example that
$ cp -r ./modules/playground ./dist/all/ demonstrates how a specific example can be built and served with Bazel:
$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
$ gulp serve ```bash
$ open http://localhost:8000/all/playground/src/hello_world/index.html?bundles=false # 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
``` ```

32
modules/playground/src/animate/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/animate/app/animate-app.ts
View File

@ -16,7 +16,7 @@ import {Component} from '@angular/core';
'(@backgroundAnimation.done)': 'bgStatusChanged($event, "completed")' '(@backgroundAnimation.done)': 'bgStatusChanged($event, "completed")'
}, },
selector: 'animate-app', selector: 'animate-app',
styleUrls: ['css/animate-app.css'], styleUrls: ['../css/animate-app.css'],
template: ` template: `
<button (click)="state='start'">Start State</button> <button (click)="state='start'">Start State</button>
<button (click)="state='active'">Active State</button> <button (click)="state='active'">Active State</button>

1
modules/playground/src/animate/index.html
View File

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

6
modules/playground/src/animate/index.ts
View File

@ -12,9 +12,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AnimateApp} from './app/animate-app'; import {AnimateApp} from './app/animate-app';
@NgModule({declarations: [AnimateApp], bootstrap: [AnimateApp], imports: [BrowserAnimationsModule]}) @NgModule({declarations: [AnimateApp], bootstrap: [AnimateApp], imports: [BrowserAnimationsModule]})
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

30
modules/playground/src/async/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/async/index.html
View File

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

4
modules/playground/src/async/index.ts
View File

@ -103,6 +103,4 @@ class AsyncApplication {
class ExampleModule { class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

9
modules/playground/src/benchpress/BUILD.bazel Normal file
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,
)

102
modules/playground/src/bootstrap.ts
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));

32
modules/playground/src/gestures/BUILD.bazel Normal file
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"],
)

3
modules/playground/src/gestures/index.html
View File

@ -14,8 +14,5 @@
</head> </head>
<body> <body>
<gestures-app></gestures-app> <gestures-app></gestures-app>
<script src="/all/playground/vendor/hammer.js"></script>
<script src="../bootstrap.js"></script>
</body> </body>
</html> </html>

4
modules/playground/src/gestures/index.ts
View File

@ -27,6 +27,4 @@ class GesturesCmp {
class ExampleModule { class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

30
modules/playground/src/hello_world/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/hello_world/index.html
View File

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

8
modules/playground/src/hello_world/index.ts
View File

@ -10,10 +10,6 @@ import {Component, Directive, ElementRef, Injectable, NgModule, Renderer} from '
import {BrowserModule} from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
export function main() {
platformBrowserDynamic().bootstrapModule(ExampleModule);
}
// A service available to the Injector, used by the HelloCmp component. // A service available to the Injector, used by the HelloCmp component.
@Injectable() @Injectable()
export class GreetingService { export class GreetingService {
@ -58,5 +54,7 @@ export class HelloCmp {
} }
@NgModule({declarations: [HelloCmp, RedDec], bootstrap: [HelloCmp], imports: [BrowserModule]}) @NgModule({declarations: [HelloCmp, RedDec], bootstrap: [HelloCmp], imports: [BrowserModule]})
class ExampleModule { export class ExampleModule {
} }
platformBrowserDynamic().bootstrapModule(ExampleModule);

32
modules/playground/src/http/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/http/index.html
View File

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

6
modules/playground/src/http/index.ts
View File

@ -14,9 +14,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {HttpCmp} from './app/http_comp'; import {HttpCmp} from './app/http_comp';
@NgModule({declarations: [HttpCmp], bootstrap: [HttpCmp], imports: [BrowserModule, HttpModule]}) @NgModule({declarations: [HttpCmp], bootstrap: [HttpCmp], imports: [BrowserModule, HttpModule]})
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

32
modules/playground/src/jsonp/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/jsonp/index.html
View File

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

6
modules/playground/src/jsonp/index.ts
View File

@ -14,9 +14,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {JsonpCmp} from './app/jsonp_comp'; import {JsonpCmp} from './app/jsonp_comp';
@NgModule({bootstrap: [JsonpCmp], declarations: [JsonpCmp], imports: [BrowserModule, JsonpModule]}) @NgModule({bootstrap: [JsonpCmp], declarations: [JsonpCmp], imports: [BrowserModule, JsonpModule]})
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

30
modules/playground/src/key_events/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/key_events/index.html
View File

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

8
modules/playground/src/key_events/index.ts
View File

@ -22,7 +22,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
tabindex="0" tabindex="0"
>{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>` >{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>`
}) })
class KeyEventsApp { export class KeyEventsApp {
lastKey: string = '(none)'; lastKey: string = '(none)';
shiftEnter: boolean = false; shiftEnter: boolean = false;
@ -71,9 +71,7 @@ class KeyEventsApp {
} }
@NgModule({declarations: [KeyEventsApp], bootstrap: [KeyEventsApp], imports: [BrowserModule]}) @NgModule({declarations: [KeyEventsApp], bootstrap: [KeyEventsApp], imports: [BrowserModule]})
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

31
modules/playground/src/model_driven_forms/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/model_driven_forms/index.html
View File

@ -13,7 +13,5 @@
<reactive-forms> <reactive-forms>
Loading... Loading...
</reactive-forms> </reactive-forms>
<script src="../bootstrap.js"></script>
</body> </body>
</html> </html>

10
modules/playground/src/model_driven_forms/index.ts
View File

@ -47,7 +47,7 @@ function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
<span *ngIf="errorMessage !== null">{{errorMessage}}</span> <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
` `
}) })
class ShowError { export class ShowError {
formDir: FormGroupDirective; formDir: FormGroupDirective;
controlPath: string; controlPath: string;
errorTypes: string[]; errorTypes: string[];
@ -136,7 +136,7 @@ class ShowError {
</form> </form>
` `
}) })
class ReactiveForms { export class ReactiveForms {
form: FormGroup; form: FormGroup;
countries = ['US', 'Canada']; countries = ['US', 'Canada'];
@ -164,9 +164,7 @@ class ReactiveForms {
declarations: [ShowError, ReactiveForms], declarations: [ShowError, ReactiveForms],
imports: [BrowserModule, ReactiveFormsModule] imports: [BrowserModule, ReactiveFormsModule]
}) })
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

31
modules/playground/src/order_management/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/order_management/index.html
View File

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

16
modules/playground/src/order_management/index.ts
View File

@ -41,7 +41,7 @@ class Order {
let _nextId = 1000; let _nextId = 1000;
@Injectable() @Injectable()
class DataService { export class DataService {
orderItems: OrderItem[]; orderItems: OrderItem[];
orders: Order[]; orders: Order[];
currentOrder: Order = null; currentOrder: Order = null;
@ -104,7 +104,7 @@ class DataService {
</div> </div>
` `
}) })
class OrderListComponent { export class OrderListComponent {
orders: Order[]; orders: Order[];
constructor(private _service: DataService) { this.orders = _service.orders; } constructor(private _service: DataService) { this.orders = _service.orders; }
@ -137,7 +137,7 @@ class OrderListComponent {
</div> </div>
` `
}) })
class OrderItemComponent { export class OrderItemComponent {
@Input() item: OrderItem; @Input() item: OrderItem;
@Output() delete = new EventEmitter(); @Output() delete = new EventEmitter();
@ -173,7 +173,7 @@ class OrderItemComponent {
</div> </div>
` `
}) })
class OrderDetailsComponent { export class OrderDetailsComponent {
constructor(private _service: DataService) {} constructor(private _service: DataService) {}
get order(): Order { return this._service.currentOrder; } get order(): Order { return this._service.currentOrder; }
@ -191,7 +191,7 @@ class OrderDetailsComponent {
<order-details-cmp></order-details-cmp> <order-details-cmp></order-details-cmp>
` `
}) })
class OrderManagementApplication { export class OrderManagementApplication {
} }
@NgModule({ @NgModule({
@ -200,9 +200,7 @@ class OrderManagementApplication {
[OrderManagementApplication, OrderListComponent, OrderDetailsComponent, OrderItemComponent], [OrderManagementApplication, OrderListComponent, OrderDetailsComponent, OrderItemComponent],
imports: [BrowserModule, FormsModule] imports: [BrowserModule, FormsModule]
}) })
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

31
modules/playground/src/person_management/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/person_management/index.html
View File

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

16
modules/playground/src/person_management/index.ts
View File

@ -45,7 +45,7 @@ class Person {
// ---- services // ---- services
@Injectable() @Injectable()
class DataService { export class DataService {
currentPerson: Person; currentPerson: Person;
persons: Person[]; persons: Person[];
@ -102,7 +102,7 @@ class DataService {
</div> </div>
` `
}) })
class FullNameComponent { export class FullNameComponent {
constructor(private _service: DataService) {} constructor(private _service: DataService) {}
get person(): Person { return this._service.currentPerson; } get person(): Person { return this._service.currentPerson; }
} }
@ -149,7 +149,7 @@ class FullNameComponent {
</div> </div>
` `
}) })
class PersonsDetailComponent { export class PersonsDetailComponent {
constructor(private _service: DataService) {} constructor(private _service: DataService) {}
get person(): Person { return this._service.currentPerson; } get person(): Person { return this._service.currentPerson; }
} }
@ -169,7 +169,7 @@ class PersonsDetailComponent {
</div> </div>
` `
}) })
class PersonsComponent { export class PersonsComponent {
persons: Person[]; persons: Person[];
constructor(private _service: DataService) { this.persons = _service.persons; } constructor(private _service: DataService) { this.persons = _service.persons; }
@ -189,7 +189,7 @@ class PersonsComponent {
<persons-cmp *ngIf="mode == 'personList'"></persons-cmp> <persons-cmp *ngIf="mode == 'personList'"></persons-cmp>
` `
}) })
class PersonManagementApplication { export class PersonManagementApplication {
mode: string; mode: string;
switchToEditName(): void { this.mode = 'editName'; } switchToEditName(): void { this.mode = 'editName'; }
@ -202,9 +202,7 @@ class PersonManagementApplication {
[PersonManagementApplication, FullNameComponent, PersonsComponent, PersonsDetailComponent], [PersonManagementApplication, FullNameComponent, PersonsComponent, PersonsDetailComponent],
imports: [BrowserModule, FormsModule] imports: [BrowserModule, FormsModule]
}) })
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

39
modules/playground/src/relative_assets/BUILD.bazel Normal file
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"],
)

9
modules/playground/src/relative_assets/app/my_cmp.ts
View File

@ -6,7 +6,16 @@
* found in the LICENSE file at https://angular.io/license * 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'; import {Component} from '@angular/core';
@Component( @Component(
{selector: 'my-cmp', templateUrl: 'tpl.html', styleUrls: ['style.css'], moduleId: module.id}) {selector: 'my-cmp', templateUrl: 'tpl.html', styleUrls: ['style.css'], moduleId: module.id})
export class MyCmp { export class MyCmp {

2
modules/playground/src/relative_assets/index.html
View File

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

8
modules/playground/src/relative_assets/index.ts
View File

@ -12,10 +12,6 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {MyCmp} from './app/my_cmp'; import {MyCmp} from './app/my_cmp';
export function main() {
platformBrowserDynamic().bootstrapModule(ExampleModule);
}
@Component({ @Component({
selector: 'relative-app', selector: 'relative-app',
template: `component = <my-cmp></my-cmp>`, template: `component = <my-cmp></my-cmp>`,
@ -24,5 +20,7 @@ export class RelativeApp {
} }
@NgModule({declarations: [RelativeApp, MyCmp], bootstrap: [RelativeApp], imports: [BrowserModule]}) @NgModule({declarations: [RelativeApp, MyCmp], bootstrap: [RelativeApp], imports: [BrowserModule]})
class ExampleModule { export class ExampleModule {
} }
platformBrowserDynamic().bootstrapModule(ExampleModule);

40
modules/playground/src/routing/BUILD.bazel Normal file
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"],
)

10
modules/playground/src/routing/app/inbox-app.ts
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 { export class InboxCmp {
private items: InboxRecord[] = []; items: InboxRecord[] = [];
private ready: boolean = false; private ready: boolean = false;
constructor(public router: Router, db: DbService, route: ActivatedRoute) { 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 { export class DraftsCmp {
private items: InboxRecord[] = []; items: InboxRecord[] = [];
private ready: boolean = false; private ready: boolean = false;
constructor(private router: Router, db: DbService) { 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'} {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 { export class InboxApp {
} }

4
modules/playground/src/routing/app/inbox-detail.ts
View File

@ -11,9 +11,9 @@ import {ActivatedRoute, RouterModule} from '@angular/router';
import {DbService, InboxRecord} from './inbox-app'; 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 { export class InboxDetailCmp {
private record: InboxRecord = new InboxRecord(); record: InboxRecord = new InboxRecord();
private ready: boolean = false; private ready: boolean = false;
constructor(db: DbService, route: ActivatedRoute) { constructor(db: DbService, route: ActivatedRoute) {

2
modules/playground/src/routing/css/gumby.css
View File

@ -9,7 +9,7 @@
*/ */
@charset "UTF-8"; @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 * Gumby Framework
* --------------- * ---------------

14
modules/playground/src/routing/index.html
View File

@ -3,12 +3,20 @@
<title>Routing Example</title> <title>Routing Example</title>
<link rel="stylesheet" type="text/css" href="./css/gumby.css"> <link rel="stylesheet" type="text/css" href="./css/gumby.css">
<link rel="stylesheet" type="text/css" href="./css/app.css"> <link rel="stylesheet" type="text/css" href="./css/app.css">
<base href="/all/playground/src/routing/"> <base href="/">
<body> <body>
<inbox-app> <inbox-app>
Loading... Loading...
</inbox-app> </inbox-app>
<script src="../bootstrap.js"></script>
</body> </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> </html>

22
modules/playground/src/routing/load-app.js Normal file
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));

19
modules/playground/src/routing/index.ts → modules/playground/src/routing/main.ts
View File

@ -13,14 +13,13 @@ import {RouterModule} from '@angular/router';
import {DbService, DraftsCmp, InboxApp, InboxCmp, ROUTER_CONFIG} from './app/inbox-app'; import {DbService, DraftsCmp, InboxApp, InboxCmp, ROUTER_CONFIG} from './app/inbox-app';
export function main() { @NgModule({
@NgModule({ providers: [DbService],
providers: [DbService], declarations: [InboxCmp, DraftsCmp, InboxApp],
declarations: [InboxCmp, DraftsCmp, InboxApp], imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), BrowserModule],
imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), BrowserModule], bootstrap: [InboxApp],
bootstrap: [InboxApp] })
}) export class RoutingExampleModule {
class RoutingExampleModule {
}
platformBrowserDynamic().bootstrapModule(RoutingExampleModule);
} }
platformBrowserDynamic().bootstrapModule(RoutingExampleModule);

34
modules/playground/src/sourcemap/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/sourcemap/index.html
View File

@ -10,7 +10,5 @@
Please look into the console and check whether the stack trace is mapped Please look into the console and check whether the stack trace is mapped
via source maps! via source maps!
</p> </p>
<script src="../bootstrap.js"></script>
</body> </body>
</html> </html>

6
modules/playground/src/sourcemap/index.ts
View File

@ -20,9 +20,7 @@ export class ErrorComponent {
} }
@NgModule({declarations: [ErrorComponent], bootstrap: [ErrorComponent], imports: [BrowserModule]}) @NgModule({declarations: [ErrorComponent], bootstrap: [ErrorComponent], imports: [BrowserModule]})
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

30
modules/playground/src/svg/BUILD.bazel Normal file
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"],
)

1
modules/playground/src/svg/index.html
View File

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

10
modules/playground/src/svg/index.ts
View File

@ -11,7 +11,7 @@ import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@Component({selector: '[svg-group]', template: `<svg:text x="20" y="20">Hello</svg:text>`}) @Component({selector: '[svg-group]', template: `<svg:text x="20" y="20">Hello</svg:text>`})
class SvgGroup { export class SvgGroup {
} }
@Component({ @Component({
@ -20,13 +20,11 @@ class SvgGroup {
<g svg-group></g> <g svg-group></g>
</svg>` </svg>`
}) })
class SvgApp { export class SvgApp {
} }
@NgModule({bootstrap: [SvgApp], declarations: [SvgApp, SvgGroup], imports: [BrowserModule]}) @NgModule({bootstrap: [SvgApp], declarations: [SvgApp, SvgGroup], imports: [BrowserModule]})
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

31
modules/playground/src/template_driven_forms/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/template_driven_forms/index.html
View File

@ -13,7 +13,5 @@
<template-driven-forms> <template-driven-forms>
Loading... Loading...
</template-driven-forms> </template-driven-forms>
<script src="../bootstrap.js"></script>
</body> </body>
</html> </html>

16
modules/playground/src/template_driven_forms/index.ts
View File

@ -33,7 +33,7 @@ class CheckoutModel {
/** /**
* Custom validator. * 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)) { if (c.value && /^\d{16}$/.test(c.value)) {
return null; return null;
} else { } else {
@ -41,14 +41,14 @@ function creditCardValidator(c: FormControl): {[key: string]: boolean} {
} }
} }
const creditCardValidatorBinding = { export const creditCardValidatorBinding = {
provide: NG_VALIDATORS, provide: NG_VALIDATORS,
useValue: creditCardValidator, useValue: creditCardValidator,
multi: true multi: true
}; };
@Directive({selector: '[credit-card]', providers: [creditCardValidatorBinding]}) @Directive({selector: '[credit-card]', providers: [creditCardValidatorBinding]})
class CreditCardValidator { export class CreditCardValidator {
} }
/** /**
@ -73,7 +73,7 @@ class CreditCardValidator {
<span *ngIf="errorMessage !== null">{{errorMessage}}</span> <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
` `
}) })
class ShowError { export class ShowError {
formDir: NgForm; formDir: NgForm;
controlPath: string; controlPath: string;
errorTypes: string[]; errorTypes: string[];
@ -161,7 +161,7 @@ class ShowError {
</form> </form>
` `
}) })
class TemplateDrivenForms { export class TemplateDrivenForms {
model = new CheckoutModel(); model = new CheckoutModel();
countries = ['US', 'Canada']; countries = ['US', 'Canada'];
@ -175,9 +175,7 @@ class TemplateDrivenForms {
bootstrap: [TemplateDrivenForms], bootstrap: [TemplateDrivenForms],
imports: [BrowserModule, FormsModule] imports: [BrowserModule, FormsModule]
}) })
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

31
modules/playground/src/todo/BUILD.bazel Normal file
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"],
)

3
modules/playground/src/todo/index.html
View File

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

8
modules/playground/src/todo/index.ts
View File

@ -13,7 +13,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Store, Todo, TodoFactory} from './app/TodoStore'; import {Store, Todo, TodoFactory} from './app/TodoStore';
@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'}) @Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'})
class TodoApp { export class TodoApp {
todoEdit: Todo = null; todoEdit: Todo = null;
constructor(public todoStore: Store<Todo>, public factory: TodoFactory) {} constructor(public todoStore: Store<Todo>, public factory: TodoFactory) {}
@ -52,9 +52,7 @@ class TodoApp {
} }
@NgModule({declarations: [TodoApp], bootstrap: [TodoApp], imports: [BrowserModule]}) @NgModule({declarations: [TodoApp], bootstrap: [TodoApp], imports: [BrowserModule]})
class ExampleModule { export class ExampleModule {
} }
export function main() { platformBrowserDynamic().bootstrapModule(ExampleModule);
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

2
modules/playground/src/todo/todo.html
View File

@ -67,5 +67,5 @@
<footer id="info"> <footer id="info">
<p>Double-click to edit a todo</p> <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> </footer>

31
modules/playground/src/upgrade/BUILD.bazel Normal file
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"],
)

2
modules/playground/src/upgrade/index.html
View File

@ -16,7 +16,5 @@
<hr> <hr>
<span class="greeting">Greetings from {{name}}!</span> <span class="greeting">Greetings from {{name}}!</span>
</upgrade-app> </upgrade-app>
<script src="/all/playground/vendor/angular.js"></script>
<script src="../bootstrap.js"></script>
</body> </body>
</html> </html>

12
modules/playground/src/upgrade/index.ts
View File

@ -50,7 +50,7 @@ ng1module.directive('ng1User', function() {
</div>`, </div>`,
styles: styles styles: styles
}) })
class Pane { export class Pane {
@Input() title: string; @Input() title: string;
} }
@ -69,7 +69,7 @@ class Pane {
</div>`, </div>`,
styles: styles styles: styles
}) })
class UpgradeApp { export class UpgradeApp {
@Input() user: string; @Input() user: string;
@Output() reset = new EventEmitter(); @Output() reset = new EventEmitter();
constructor() {} constructor() {}
@ -77,14 +77,12 @@ class UpgradeApp {
@NgModule({ @NgModule({
declarations: [Pane, UpgradeApp, adapter.upgradeNg1Component('ng1User')], declarations: [Pane, UpgradeApp, adapter.upgradeNg1Component('ng1User')],
imports: [BrowserModule] imports: [BrowserModule],
}) })
class Ng2AppModule { export class Ng2AppModule {
} }
ng1module.directive('upgradeApp', adapter.downgradeNg2Component(UpgradeApp)); ng1module.directive('upgradeApp', adapter.downgradeNg2Component(UpgradeApp));
export function main() { adapter.bootstrap(document.body, ['myExample']);
adapter.bootstrap(document.body, ['myExample']);
}

13
modules/playground/src/web_workers/BUILD.bazel Normal file
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",
],
)

34
modules/playground/src/web_workers/animations/BUILD.bazel Normal file
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"],
)

6
modules/playground/src/web_workers/animations/background_index.ts
View File

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

1
modules/playground/src/web_workers/animations/index.html
View File

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

4
modules/playground/src/web_workers/animations/index.ts
View File

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

20
modules/playground/src/web_workers/animations/loader.js
View File

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

35
modules/playground/src/web_workers/images/BUILD.bazel Normal file
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"],
)

6
modules/playground/src/web_workers/images/background_index.ts
View File

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

2
modules/playground/src/web_workers/images/index.html
View File

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

4
modules/playground/src/web_workers/images/index.ts
View File

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

25
modules/playground/src/web_workers/images/loader.js
View File

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

2
modules/playground/src/web_workers/images/services/bitmap.ts
View File

@ -35,7 +35,7 @@ export class BitmapService {
toDataUri(imageData: ImageData): string { toDataUri(imageData: ImageData): string {
const header = this._createBMPHeader(imageData); const header = this._createBMPHeader(imageData);
imageData = this._imageDataToBMP(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 // converts a .bmp file ArrayBuffer to a dataURI

33
modules/playground/src/web_workers/input/BUILD.bazel Normal file
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"],
)

6
modules/playground/src/web_workers/input/background_index.ts
View File

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

2
modules/playground/src/web_workers/input/index.html
View File

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

4
modules/playground/src/web_workers/input/index.ts
View File

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

20
modules/playground/src/web_workers/input/loader.js
View File

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

33
modules/playground/src/web_workers/kitchen_sink/BUILD.bazel Normal file
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"],
)

14
modules/playground/src/web_workers/kitchen_sink/background_index.ts
View File

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

2
modules/playground/src/web_workers/kitchen_sink/index.html
View File

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

4
modules/playground/src/web_workers/kitchen_sink/index.ts
View File

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

20
modules/playground/src/web_workers/kitchen_sink/loader.js
View File

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

33
modules/playground/src/web_workers/message_broker/BUILD.bazel Normal file
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"],
)

6
modules/playground/src/web_workers/message_broker/background_index.ts
View File

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

1
modules/playground/src/web_workers/message_broker/index.html
View File

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

6
modules/playground/src/web_workers/message_broker/index.ts
View File

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

20
modules/playground/src/web_workers/message_broker/loader.js
View File

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

34
modules/playground/src/web_workers/router/BUILD.bazel Normal file
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"],
)

5
modules/playground/src/web_workers/router/background_index.ts
View File

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

1
modules/playground/src/web_workers/router/index.html
View File

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

4
modules/playground/src/web_workers/router/index.ts
View File

@ -8,6 +8,4 @@
import {WORKER_UI_LOCATION_PROVIDERS, bootstrapWorkerUi} from '@angular/platform-webworker'; 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);
}

20
modules/playground/src/web_workers/router/loader.js
View File

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

35
modules/playground/src/web_workers/todo/BUILD.bazel Normal file
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"],
)

6
modules/playground/src/web_workers/todo/background_index.ts
View File

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

3
modules/playground/src/web_workers/todo/index.html
View File

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

4
modules/playground/src/web_workers/todo/index.ts
View File

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

20
modules/playground/src/web_workers/todo/loader.js
View File

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

14
modules/playground/src/web_workers/worker-configure.js Normal file
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