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
committed by
Matias Niemelä
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"],
|
||||
)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user