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
Matias Niemelä
parent
b7738ef9e4
commit
e4fb93c28a
|
|
@ -0,0 +1,6 @@
|
|||
exports_files([
|
||||
"tsconfig-build.json",
|
||||
"tsconfig-e2e.json",
|
||||
"systemjs-config.js",
|
||||
"systemjs-rxjs-operators.js",
|
||||
])
|
||||
|
|
@ -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
|
||||
```
|
||||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,5 @@
|
|||
</style>
|
||||
<body>
|
||||
<animate-app>Loading...</animate-app>
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -8,7 +8,5 @@
|
|||
<async-app>
|
||||
Loading...
|
||||
</async-app>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -103,6 +103,4 @@ class AsyncApplication {
|
|||
class ExampleModule {
|
||||
}
|
||||
|
||||
export function main() {
|
||||
platformBrowserDynamic().bootstrapModule(ExampleModule);
|
||||
}
|
||||
platformBrowserDynamic().bootstrapModule(ExampleModule);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
)
|
||||
|
|
@ -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));
|
||||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,4 @@ class GesturesCmp {
|
|||
class ExampleModule {
|
||||
}
|
||||
|
||||
export function main() {
|
||||
platformBrowserDynamic().bootstrapModule(ExampleModule);
|
||||
}
|
||||
platformBrowserDynamic().bootstrapModule(ExampleModule);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -5,7 +5,5 @@
|
|||
<hello-app>
|
||||
Loading...
|
||||
</hello-app>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -5,7 +5,5 @@
|
|||
<http-app>
|
||||
Loading...
|
||||
</http-app>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -5,7 +5,5 @@
|
|||
<jsonp-app>
|
||||
Loading...
|
||||
</jsonp-app>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -20,7 +20,5 @@
|
|||
<key-events-app>
|
||||
Loading...
|
||||
</key-events-app>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -13,7 +13,5 @@
|
|||
<reactive-forms>
|
||||
Loading...
|
||||
</reactive-forms>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -13,7 +13,5 @@
|
|||
<order-management-app>
|
||||
Loading...
|
||||
</order-management-app>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -13,7 +13,5 @@
|
|||
<person-management-app>
|
||||
Loading...
|
||||
</person-management-app>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,5 @@
|
|||
<relative-app>
|
||||
Loading...
|
||||
</relative-app>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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 {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
* ---------------
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
@ -13,14 +13,13 @@ import {RouterModule} from '@angular/router';
|
|||
|
||||
import {DbService, DraftsCmp, InboxApp, InboxCmp, ROUTER_CONFIG} from './app/inbox-app';
|
||||
|
||||
export function main() {
|
||||
@NgModule({
|
||||
@NgModule({
|
||||
providers: [DbService],
|
||||
declarations: [InboxCmp, DraftsCmp, InboxApp],
|
||||
imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), BrowserModule],
|
||||
bootstrap: [InboxApp]
|
||||
})
|
||||
class RoutingExampleModule {
|
||||
}
|
||||
platformBrowserDynamic().bootstrapModule(RoutingExampleModule);
|
||||
bootstrap: [InboxApp],
|
||||
})
|
||||
export class RoutingExampleModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(RoutingExampleModule);
|
||||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -5,6 +5,5 @@
|
|||
<svg-app>
|
||||
Loading...
|
||||
</svg-app>
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -13,7 +13,5 @@
|
|||
<template-driven-forms>
|
||||
Loading...
|
||||
</template-driven-forms>
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -7,8 +7,5 @@
|
|||
<todo-app>
|
||||
Loading...
|
||||
</todo-app>
|
||||
|
||||
|
||||
<script src="../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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']);
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
],
|
||||
)
|
||||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,4 @@
|
|||
|
||||
import {bootstrapWorkerUi} from '@angular/platform-webworker';
|
||||
|
||||
export function main() {
|
||||
bootstrapWorkerUi('loader.js');
|
||||
}
|
||||
bootstrapWorkerUi('loader.js');
|
||||
|
|
|
|||
|
|
@ -6,19 +6,9 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
importScripts(
|
||||
'../../../vendor/core.js', '../../../vendor/zone.js',
|
||||
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
|
||||
'../../../vendor/Reflect.js');
|
||||
importScripts('../worker-systemjs-configure.js');
|
||||
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
|
||||
|
||||
System.import('playground/src/web_workers/animations/background_index')
|
||||
.then(
|
||||
function(m) {
|
||||
try {
|
||||
m.main();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
function(error) { console.error('error loading background', error); });
|
||||
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
|
||||
|
||||
System.import('./background_index.js')
|
||||
.catch(error => console.error('error loading background', error));
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,4 @@
|
|||
|
||||
import {bootstrapWorkerUi} from '@angular/platform-webworker';
|
||||
|
||||
export function main() {
|
||||
bootstrapWorkerUi('loader.js');
|
||||
}
|
||||
bootstrapWorkerUi('loader.js');
|
||||
|
|
|
|||
|
|
@ -6,19 +6,14 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
importScripts(
|
||||
'../../../vendor/core.js', '../../../vendor/zone.js',
|
||||
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
|
||||
'../../../vendor/Reflect.js');
|
||||
importScripts('../worker-systemjs-configure.js');
|
||||
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
|
||||
|
||||
System.import('playground/src/web_workers/images/background_index')
|
||||
.then(
|
||||
function(m) {
|
||||
try {
|
||||
m.main();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
System.config({
|
||||
map: {
|
||||
'base64-js': 'ngdeps/node_modules/base64-js/base64js.min.js',
|
||||
},
|
||||
function(error) { console.error('error loading background', error); });
|
||||
packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}
|
||||
});
|
||||
|
||||
System.import('./background_index.js')
|
||||
.catch(error => console.error('error loading background', error));
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,5 @@
|
|||
<input-app>
|
||||
Loading...
|
||||
</input-app>
|
||||
|
||||
<script src="../../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,4 @@
|
|||
|
||||
import {bootstrapWorkerUi} from '@angular/platform-webworker';
|
||||
|
||||
export function main() {
|
||||
bootstrapWorkerUi('loader.js');
|
||||
}
|
||||
bootstrapWorkerUi('loader.js');
|
||||
|
|
|
|||
|
|
@ -6,19 +6,9 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
importScripts(
|
||||
'../../../vendor/core.js', '../../../vendor/zone.js',
|
||||
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
|
||||
'../../../vendor/Reflect.js');
|
||||
importScripts('../worker-systemjs-configure.js');
|
||||
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
|
||||
|
||||
System.import('playground/src/web_workers/input/background_index')
|
||||
.then(
|
||||
function(m) {
|
||||
try {
|
||||
m.main();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
function(error) { console.error('error loading background', error); });
|
||||
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
|
||||
|
||||
System.import('./background_index.js')
|
||||
.catch(error => console.error('error loading background', error));
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,5 @@
|
|||
<hello-app>
|
||||
Loading...
|
||||
</hello-app>
|
||||
|
||||
<script src="../../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,4 @@
|
|||
|
||||
import {bootstrapWorkerUi} from '@angular/platform-webworker';
|
||||
|
||||
export function main() {
|
||||
bootstrapWorkerUi('loader.js');
|
||||
}
|
||||
bootstrapWorkerUi('loader.js');
|
||||
|
|
|
|||
|
|
@ -6,19 +6,9 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
importScripts(
|
||||
'../../../vendor/core.js', '../../../vendor/zone.js',
|
||||
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
|
||||
'../../../vendor/Reflect.js');
|
||||
importScripts('../worker-systemjs-configure.js');
|
||||
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
|
||||
|
||||
System.import('playground/src/web_workers/kitchen_sink/background_index')
|
||||
.then(
|
||||
function(m) {
|
||||
try {
|
||||
m.main();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
function(error) { console.error('error loading background', error); });
|
||||
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
|
||||
|
||||
System.import('./background_index.js')
|
||||
.catch(error => console.error('error loading background', error));
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,5 @@
|
|||
<title>Web Worker Router Example</title>
|
||||
<body>
|
||||
<app></app>
|
||||
<script src="../../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
)
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -6,8 +6,5 @@
|
|||
<todo-app>
|
||||
Loading...
|
||||
</todo-app>
|
||||
|
||||
|
||||
<script src="../../bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,4 @@
|
|||
|
||||
import {bootstrapWorkerUi} from '@angular/platform-webworker';
|
||||
|
||||
export function main() {
|
||||
bootstrapWorkerUi('loader.js');
|
||||
}
|
||||
bootstrapWorkerUi('loader.js');
|
||||
|
|
|
|||
|
|
@ -6,19 +6,9 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
importScripts(
|
||||
'../../../vendor/core.js', '../../../vendor/zone.js',
|
||||
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
|
||||
'../../../vendor/Reflect.js');
|
||||
importScripts('../worker-systemjs-configure.js');
|
||||
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
|
||||
|
||||
System.import('playground/src/web_workers/todo/background_index')
|
||||
.then(
|
||||
function(m) {
|
||||
try {
|
||||
m.main();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
function(error) { console.error('error loading background', error); });
|
||||
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
|
||||
|
||||
System.import('./background_index.js')
|
||||
.catch(error => console.error('error loading background', error));
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Reference in New Issue