Add angular material

Author: gregmagolan

WORKSPACE

@@ -35,6 +35,13 @@ http_archive(
     sha256 = "72b0b4e517f43358f554c125e40e39f67688cd2738a8998b4a266981ed32f403",
 )
 
+# Angular material
+http_archive(
+    name = "angular_material",
+    url = "https://github.com/gregmagolan/material2/archive/366b076bc46f08218a8019de060fbed20312395c.zip",
+    strip_prefix = "material2-366b076bc46f08218a8019de060fbed20312395c",
+)
+
 # Rules for compiling sass
 http_archive(
     name = "io_bazel_rules_sass",
@@ -97,3 +104,7 @@ sass_repositories()
 load("@angular//:index.bzl", "ng_setup_workspace")
 
 ng_setup_workspace()
+
+load("@angular_material//:index.bzl", "mat_setup_workspace")
+
+mat_setup_workspace()

package.json

@@ -11,10 +11,14 @@
         "zone.js": "0.8.26"
     },
     "devDependencies": {
+        "@angular/animations": "7.0.1",
         "@angular/bazel": "7.0.1",
+        "@angular/cdk": "7.0.1",
         "@angular/compiler": "7.0.1",
         "@angular/compiler-cli": "7.0.1",
+        "@angular/common": "7.0.1",
         "@angular/core": "7.0.1",
+        "@angular/material": "7.0.1",
         "@bazel/benchmark-runner": "0.1.0",
         "@bazel/ibazel": "0.5.0",
         "@bazel/karma": "0.20.3",

src/BUILD.bazel

@@ -18,6 +18,7 @@ ng_module(
     tsconfig = ":tsconfig.json",
     deps = [
         "//src/hello-world",
+        "//src/material",
         "//src/todos",
         "@angular//packages/core",
         "@angular//packages/router",
@@ -35,19 +36,22 @@ ts_devserver(
     additional_root_paths = [
         "npm/node_modules/zone.js/dist",
         "npm/node_modules/tslib",
+        "npm/node_modules/@angular/material/prebuilt-themes",
         "npm/node_modules/@ngrx/store/bundles",
     ],
     # Start from the development version of the main
     entry_module = "angular_bazel_example/src/main.dev",
     scripts = [
         ":require.config.js",
+        ":module-id.js",
     ],
     # This is the URL we'll point our <script> tag at
     serving_path = "/bundle.min.js",
     # Serve these files in addition to the JavaScript bundle
     static_files = [
         "@npm//node_modules/zone.js:dist/zone.min.js",
         "@npm//node_modules/tslib:tslib.js",
+        "@npm//node_modules/@angular/material:prebuilt-themes/deeppurple-amber.css",
         "@npm//node_modules/@ngrx/store:bundles/store.umd.min.js",
         "index.html",
     ],
@@ -93,13 +97,22 @@ genrule(
     cmd = "cp $< $@",
 )
 
+# See comment for zonejs above
+genrule(
+    name = "copy_material_theme",
+    srcs = ["@npm//node_modules/@angular/material:prebuilt-themes/deeppurple-amber.css"],
+    outs = ["deeppurple-amber.css"],
+    cmd = "cp $< $@",
+)
+
 load("@build_bazel_rules_nodejs//:defs.bzl", "history_server")
 
 history_server(
     name = "prodserver",
     data = [
         "index.html",
         ":bundle",
+        ":copy_material_theme",
         ":copy_systemjs",
         ":copy_zonejs",
     ],

src/app.component.html

@@ -1,2 +1,5 @@
+<mat-toolbar>
+  <span>My Application</span>
+</mat-toolbar>
 <nav><a routerLink="/">Home</a> | <a routerLink="/todos">Todos</a></nav>
 <router-outlet></router-outlet>

src/app.module.ts

@@ -5,11 +5,12 @@ import {StoreModule} from '@ngrx/store';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
+import {MaterialModule} from './material/material.module';
 import {todoReducer} from './reducers/reducers';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, StoreModule.forRoot({todoReducer})],
+  imports: [AppRoutingModule, BrowserModule, MaterialModule, StoreModule.forRoot({todoReducer})],
   exports: [AppComponent],
   bootstrap: [AppComponent],
 })

src/hello-world/BUILD.bazel

@@ -20,12 +20,13 @@ ng_module(
         ":hello-world.component.html",
         ":hello-world-styles",
     ],
+    tsconfig = "//src:tsconfig.json",
     deps = [
         "//src/lib",
+        "//src/material",
         "@angular//packages/core",
         "@angular//packages/forms",
         "@angular//packages/router",
-        "@npm//@types",
     ],
 )
 
@@ -51,6 +52,7 @@ ts_web_test_suite(
     bootstrap = [
         "@npm//node_modules/zone.js:dist/zone-testing-bundle.js",
         "@npm//node_modules/reflect-metadata:Reflect.js",
+        "//src:module-id.js",
     ],
     browsers = [
         "@io_bazel_rules_webtesting//browsers:chromium-local",

src/hello-world/hello-world.component.html

@@ -3,3 +3,5 @@ <h1>Home</h1>
 <div>Hello {{ name }}</div>
 
 <input type="text" [(ngModel)]="name"/>
+
+<div><mat-icon>mood</mat-icon></div>

src/hello-world/hello-world.module.ts

@@ -1,13 +1,15 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {MaterialModule} from '../material/material.module';
 
 import {HelloWorldComponent} from './hello-world.component';
 
 @NgModule({
   declarations: [HelloWorldComponent],
   imports: [
-    FormsModule, RouterModule, RouterModule.forChild([{path: '', component: HelloWorldComponent}])
+    FormsModule, RouterModule, MaterialModule,
+    RouterModule.forChild([{path: '', component: HelloWorldComponent}])
   ],
   exports: [HelloWorldComponent],
 })

src/index.html

@@ -4,6 +4,8 @@
   <head>
     <title>Angular Bazel Example</title>
     <base href="/">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link href="/deeppurple-amber.css" rel="stylesheet">
   </head>
   <body>
     <!-- The Angular application will be bootstrapped into this element. -->

src/material/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@angular//:index.bzl", "ng_module")
+
+ng_module(
+    name = "material",
+    srcs = glob(["*.ts"]),
+    tsconfig = "//src:tsconfig.json",
+    deps = [
+        "@angular//packages/core",
+        "@angular_material//src/lib:material",
+    ],
+)

src/material/material.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {MatIconModule, MatToolbarModule} from '@angular/material';
+
+const matModules = [MatToolbarModule, MatIconModule];
+
+@NgModule({
+  imports: matModules,
+  exports: matModules,
+})
+export class MaterialModule {
+}

src/module-id.js

@@ -0,0 +1,6 @@
+// Work-around for angular material issue with ts_devserver and ts_web_test_suite.
+// Material requires `module.id` to be valid. This symbol is valid in the production
+// bundle but not in ts_devserver and ts_web_test_suite.
+// See https://github.com/angular/material2/issues/13883.
+// TODO(gmagolan): remove this work-around once #13883 is resolved.
+var module = {id: ''};

src/todos/BUILD.bazel

@@ -20,6 +20,7 @@ ng_module(
         "todos.component.html",
         ":todos-styles",
     ],
+    tsconfig = "//src:tsconfig.json",
     deps = [
         "//src/lib",
         "//src/reducers",
@@ -28,7 +29,6 @@ ng_module(
         "@angular//packages/forms",
         "@angular//packages/router",
         "@npm//@ngrx/store",
-        "@npm//@types",
         "@rxjs",
     ],
 )

yarn.lock

@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@angular/[email protected]":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-7.0.1.tgz#2df561c0959e156985297e69b7c30614537b4ffe"
+  integrity sha512-gRirN4Maduh198VhpI1cLoWCtD/BTQT4lPuwiVkHYaradiwEqPlyE+EP/4QZRmFZH+BqwvjS+FYtICznE668Cg==
+  dependencies:
+    tslib "^1.9.0"
+
 "@angular/[email protected]":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@angular/bazel/-/bazel-7.0.1.tgz#42e1a114a20643ea53cff1bb8091e1ba08637885"
@@ -12,6 +19,22 @@
     shelljs "0.8.2"
     tsickle "0.32.1"
 
+"@angular/[email protected]":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-7.0.1.tgz#8c991a2399c6a89c7238fa9ce1d0623e243b3787"
+  integrity sha512-WCIz2kbNMrEXkGxbHfBMRvjH7sxzp+nBR2gEhBvUEm9Ap/wBIJaTnHOF743D2fEhtW3IgpaYsTDTKiVryOFcQg==
+  dependencies:
+    tslib "^1.7.1"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
+"@angular/[email protected]":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-7.0.1.tgz#55750879f08d5f4b6f247f7dce0b5ea2b3ec2059"
+  integrity sha512-QnGwwM6+OLuzu0VZvzQMPENJQgOMmcjZC1vxWu5y62fPI3BsTDYaePOAEN6mfY8R09J90FmF2IXXC5DN/el0Ug==
+  dependencies:
+    tslib "^1.9.0"
+
 "@angular/[email protected]":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-7.0.1.tgz#bd21ebc950f65fb5848307a271e7bd9d049efc9c"
@@ -42,6 +65,13 @@
   dependencies:
     tslib "^1.9.0"
 
+"@angular/[email protected]":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-7.0.1.tgz#51ddbc1ae7ed41926fd8a0cbba0f7565ee8fda2d"
+  integrity sha512-/gf2G+/W/SB/54Q+EDKWfaDFuj403XYMSY3IcFJmuR4H8KkDtDr6bM9/HrRpYWNIlrVwOrKE9ByeoFzm5yDmvA==
+  dependencies:
+    tslib "^1.7.1"
+
 "@bazel/[email protected]":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@bazel/benchmark-runner/-/benchmark-runner-0.1.0.tgz#a586394fcf7f2402b381319fbc2750627b5a06f1"
@@ -3074,6 +3104,11 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
+parse5@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+  integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
+
 [email protected]:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
@@ -4198,7 +4233,7 @@ [email protected]:
     source-map "^0.6.0"
     source-map-support "^0.5.0"
 
-[email protected], tslib@^1.8.1, tslib@^1.9.0:
+[email protected], tslib@^1.7.1, tslib@^1.8.1, tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==