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

modules/playground/src/routing/BUILD.bazel

@@ -0,0 +1,40 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+package(default_visibility = ["//modules/playground:__subpackages__"])
+
+ng_module(
+    name = "routing",
+    srcs = glob(["**/*.ts"]),
+    assets = glob(["**/*.html"]),
+    tsconfig = "//modules/playground:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/router",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        # This is temporarily needed because Angular imports from "rxjs/operators/index", while
+        # there is only one RxJS UMD bundle that re-exports everything at the root.
+        "//modules/playground:systemjs-rxjs-operators.js",
+        "@ngdeps//node_modules/rxjs:bundles/rxjs.umd.js",
+        "@ngdeps//node_modules/tslib:tslib.js",
+    ] + glob(["**/*.css"]),
+    port = 4200,
+    static_files = [
+        "index.html",
+        "@ngdeps//node_modules/zone.js:dist/zone.js",
+        "@ngdeps//node_modules/reflect-metadata:Reflect.js",
+        "@ngdeps//node_modules/systemjs:dist/system.js",
+        "//modules/playground:systemjs-config.js",
+        "load-app.js",
+    ],
+    deps = [":routing"],
+)

modules/playground/src/routing/app/inbox-app.ts

@@ -84,9 +84,9 @@ export class DbService {
   }
 }
 
-@Component({selector: 'inbox', templateUrl: 'app/inbox.html'})
+@Component({selector: 'inbox', templateUrl: './inbox.html'})
 export class InboxCmp {
-  private items: InboxRecord[] = [];
+  items: InboxRecord[] = [];
   private ready: boolean = false;
 
   constructor(public router: Router, db: DbService, route: ActivatedRoute) {
@@ -107,9 +107,9 @@ export class InboxCmp {
 }
 
 
-@Component({selector: 'drafts', templateUrl: 'app/drafts.html'})
+@Component({selector: 'drafts', templateUrl: './drafts.html'})
 export class DraftsCmp {
-  private items: InboxRecord[] = [];
+  items: InboxRecord[] = [];
   private ready: boolean = false;
 
   constructor(private router: Router, db: DbService) {
@@ -125,6 +125,6 @@ export const ROUTER_CONFIG = [
   {path: 'drafts', component: DraftsCmp}, {path: 'detail', loadChildren: 'app/inbox-detail.js'}
 ];
 
-@Component({selector: 'inbox-app', templateUrl: 'app/inbox-app.html'})
+@Component({selector: 'inbox-app', templateUrl: './inbox-app.html'})
 export class InboxApp {
 }

modules/playground/src/routing/app/inbox-detail.ts

@@ -11,9 +11,9 @@ import {ActivatedRoute, RouterModule} from '@angular/router';
 
 import {DbService, InboxRecord} from './inbox-app';
 
-@Component({selector: 'inbox-detail', templateUrl: 'app/inbox-detail.html'})
+@Component({selector: 'inbox-detail', templateUrl: './inbox-detail.html'})
 export class InboxDetailCmp {
-  private record: InboxRecord = new InboxRecord();
+  record: InboxRecord = new InboxRecord();
   private ready: boolean = false;
 
   constructor(db: DbService, route: ActivatedRoute) {

modules/playground/src/routing/css/gumby.css

@@ -9,7 +9,7 @@
  */
 
 @charset "UTF-8";
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
 /**
 * Gumby Framework
 * ---------------

modules/playground/src/routing/index.html

@@ -3,12 +3,20 @@
   <title>Routing Example</title>
   <link rel="stylesheet" type="text/css" href="./css/gumby.css">
   <link rel="stylesheet" type="text/css" href="./css/app.css">
-  <base href="/all/playground/src/routing/">
+  <base href="/">
 <body>
   <inbox-app>
     Loading...
   </inbox-app>
-
-  <script src="../bootstrap.js"></script>
 </body>
+<!--
+  We are manually loading the scripts because we don't use ConcatJS for this example.
+  This is because we want to use SystemJS instead of RequireJS and want to support
+  lazy loading of routes. Read more in the "load-app.js" file.
+-->
+<script src="ngdeps/node_modules/zone.js/dist/zone.js"></script>
+<script src="ngdeps/node_modules/reflect-metadata/Reflect.js"></script>
+<script src="ngdeps/node_modules/systemjs/dist/system.js"></script>
+<script src="angular/modules/playground/systemjs-config.js"></script>
+<script src="load-app.js"></script>
 </html>

modules/playground/src/routing/load-app.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/*
+ * Normally the "ts_devserver" bundles all specified source files into a bundle and uses
+ * Require.JS, but for this example we need to use SystemJS as module loader since this
+ * example uses lazy loading and we want to ensure that the default SystemJS factory loader
+ * works as expected.
+ */
+
+System.config({
+  packages: {
+    'angular/modules/playground/src/routing': {defaultExtension: 'js'},
+  }
+});
+
+System.import('./main.js').catch(e => console.error(e));

modules/playground/src/routing/main.ts

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