Add angular material (#228)

* Add angular material

Author: gregmagolan

.circleci/config.yml

@@ -47,6 +47,7 @@ jobs:
 
   build:
     <<: *job_defaults
+    resource_class: xlarge
     steps:
       - checkout:
           <<: *post_checkout

WORKSPACE

@@ -23,8 +23,8 @@ http_archive(
 # The @angular repo contains rule for building Angular applications
 http_archive(
     name = "angular",
-    url = "https://github.com/angular/angular/archive/7.0.1.zip",
-    strip_prefix = "angular-7.0.1",
+    url = "https://github.com/angular/angular/archive/7.0.2.zip",
+    strip_prefix = "angular-7.0.2",
 )
 
 # The @rxjs repo contains targets for building rxjs with bazel
@@ -35,6 +35,14 @@ http_archive(
     sha256 = "72b0b4e517f43358f554c125e40e39f67688cd2738a8998b4a266981ed32f403",
 )
 
+# Angular material
+# TODO(gmagolan): update to next tagged https://github.com/angular/material2
+http_archive(
+    name = "angular_material",
+    url = "https://github.com/angular/material2/archive/150c964c320c8573b6c02eb0a7024bb2919a22c2.zip",
+    strip_prefix = "material2-150c964c320c8573b6c02eb0a7024bb2919a22c2",
+)
+
 # Rules for compiling sass
 http_archive(
     name = "io_bazel_rules_sass",
@@ -97,3 +105,7 @@ sass_repositories()
 load("@angular//:index.bzl", "ng_setup_workspace")
 
 ng_setup_workspace()
+
+load("@angular_material//:index.bzl", "angular_material_setup_workspace")
+
+angular_material_setup_workspace()

package.json

@@ -11,10 +11,14 @@
         "zone.js": "0.8.26"
     },
     "devDependencies": {
-        "@angular/bazel": "7.0.1",
-        "@angular/compiler": "7.0.1",
-        "@angular/compiler-cli": "7.0.1",
-        "@angular/core": "7.0.1",
+        "@angular/animations": "7.0.2",
+        "@angular/bazel": "7.0.2",
+        "@angular/cdk": "7.0.2",
+        "@angular/compiler": "7.0.2",
+        "@angular/compiler-cli": "7.0.2",
+        "@angular/common": "7.0.2",
+        "@angular/core": "7.0.2",
+        "@angular/material": "7.0.2",
         "@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,4 @@
-<nav><a routerLink="/">Home</a> | <a routerLink="/todos">Todos</a></nav>
+<mat-toolbar>
+  <nav><a routerLink="/">Home</a> | <a routerLink="/todos">Todos</a></nav>
+</mat-toolbar>
 <router-outlet></router-outlet>

src/app.module.ts

@@ -1,15 +1,20 @@
 
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 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, BrowserAnimationsModule, 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",
     ],
 )
 
@@ -39,6 +40,7 @@ ts_library(
         "@angular//packages/core/testing",
         "@angular//packages/platform-browser",
         "@angular//packages/platform-browser-dynamic/testing",
+        "@angular//packages/platform-browser/animations",
         "@npm//@types/jasmine",
         "@npm//@types/node",
     ],
@@ -51,6 +53,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

@@ -2,4 +2,6 @@ <h1>Home</h1>
 
 <div>Hello {{ name }}</div>
 
-<input type="text" [(ngModel)]="name"/>
+<mat-form-field><input matInput [(ngModel)]="name"/></mat-form-field>
+
+<div><mat-icon>mood</mat-icon></div>

src/hello-world/hello-world.component.spec.ts

@@ -1,6 +1,7 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 import {HelloWorldComponent} from './hello-world.component';
 import {HelloWorldModuleNgSummary} from './hello-world.module.ngsummary';
@@ -21,6 +22,7 @@ describe('BannerComponent (inline template)', () => {
     TestBed.configureTestingModule({
       declarations: [HelloWorldComponent],  // declare the test component
       aotSummaries: HelloWorldModuleNgSummary,
+      imports: [BrowserAnimationsModule],
     });
     TestBed.compileComponents();
   }));

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,12 @@
+import {NgModule} from '@angular/core';
+import {MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatToolbarModule} from '@angular/material';
+
+const matModules =
+    [MatButtonModule, MatInputModule, MatFormFieldModule, MatIconModule, MatToolbarModule];
+
+@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,15 +20,16 @@ ng_module(
         "todos.component.html",
         ":todos-styles",
     ],
+    tsconfig = "//src:tsconfig.json",
     deps = [
         "//src/lib",
+        "//src/material",
         "//src/reducers",
         "@angular//packages/common",
         "@angular//packages/core",
         "@angular//packages/forms",
         "@angular//packages/router",
         "@npm//@ngrx/store",
-        "@npm//@types",
         "@rxjs",
     ],
 )

src/todos/todos.component.html

@@ -1,20 +1,21 @@
 <h1>Todos</h1>
 
-<input placeholder="your todo" [(ngModel)]="todo">
+<mat-form-field><input matInput placeholder="your todo" [(ngModel)]="todo"></mat-form-field>
 
-<button
+<button mat-raised-button color="primary"
   (click)="addTodo(todo)"
-  [disabled]="!todo"
+  [disabled]=!todo
   *ngIf="!editing">
     Add todo
 </button>
 
-<button
+<button mat-raised-button
   (click)="updateTodo(todo)"
   *ngIf="editing">
     Update
 </button>
-<button
+
+<button mat-raised-button color="warn"
   (click)="cancelEdit()"
   *ngIf="editing">
     Cancel
@@ -23,8 +24,8 @@ <h1>Todos</h1>
 <ul>
   <li *ngFor="let todo of todos$ | async; let i = index;">
     <span [class.done]="todo.done">{{ todo.value }}</span>
-    <button (click)="editTodo(todo, i)">Edit</button>
-    <button (click)="toggleDone(todo, i)">Toggle Done</button>
-    <button (click)="deleteTodo(i)">X</button>
+    <button mat-raised-button (click)="editTodo(todo, i)">Edit</button>
+    <button mat-raised-button (click)="toggleDone(todo, i)">Toggle Done</button>
+    <button mat-raised-button color="warn" (click)="deleteTodo(i)">X</button>
   </li>
 </ul>

src/todos/todos.module.ts

@@ -2,13 +2,14 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {MaterialModule} from '../material/material.module';
 
 import {TodosComponent} from './todos.component';
 
 @NgModule({
   declarations: [TodosComponent],
   imports: [
-    CommonModule, FormsModule, RouterModule,
+    CommonModule, FormsModule, RouterModule, MaterialModule,
     RouterModule.forChild([{path: '', component: TodosComponent}])
   ],