angular/material2のgetting startedで省略されている部分の補足

Angular MaterialのGetting Startedをしようとしたのですが、angular1系は触ったことはあるのですがangular2もtype scriptも詳しくないので、省略されている部分を自分で補うのに苦労しました。これがそのメモというか、編集ログになります。angular cliはnpm install -g @angular/cliで導入してから、次のシェルスクリプトを実行します。すると、実行したディレクトリ内にmd-sampleというangularjsのプロジェクトが作られて、マテリアルデザインを利用するためにとりあえず必要なものがインストールされたり、コンポーネント、モジュールが生成されます。

#!/bin/bash
ng new md-sample
cd md-sample
ng g component hello
ng g module hello
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations hammerjs
echo "@import \"~@angular/material/prebuilt-themes/indigo-pink.css\";" >> ./src/styles.css

スクリプトの実行が終了したら、次のように変更することでangular/material2が利用できます。

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 46d517b..6969b8e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,6 +5,7 @@
 </div>
+  <app-hello></app-hello>
 <h2>Here are some links to help you start: </h2>
 <ul>
   <li>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 72e57f2..042d98c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,16 +1,19 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import 'hammerjs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HelloModule } from './hello/hello.module';

 import { AppComponent } from './app.component';
-import { HelloComponent } from './hello/hello.component';

 @NgModule({
   declarations: [
     AppComponent,
-    HelloComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    HelloModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/hello/hello.component.html b/src/app/hello/hello.component.html
index 4fba6a4..11bfc96 100644
--- a/src/app/hello/hello.component.html
+++ b/src/app/hello/hello.component.html
@@ -1,3 +1,4 @@
 <p>
   hello works!
 </p>
+<button mat-raised-button>Hello</button>
diff --git a/src/app/hello/hello.component.ts b/src/app/hello/hello.component.ts
index a35d859..2761b61 100644
--- a/src/app/hello/hello.component.ts
+++ b/src/app/hello/hello.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 @Component({
   selector: 'app-hello',
   templateUrl: './hello.component.html',
diff --git a/src/app/hello/hello.module.ts b/src/app/hello/hello.module.ts
index 738882e..400d153 100644
--- a/src/app/hello/hello.module.ts
+++ b/src/app/hello/hello.module.ts
@@ -1,10 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
+import { HelloComponent } from './hello.component';
+import { MatButtonModule } from '@angular/material';
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    MatButtonModule
   ],
-  declarations: []
+  exports: [HelloComponent],
+  declarations: [HelloComponent]
 })
 export class HelloModule { }

動作確認はng serveしてからhttp://localhost:4200を開いてボタンが表示されればOKです。

バージョンについて

$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.4
node: 6.11.2
os: darwin x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4
$ npm --version
3.10.10