Angular CLI 6.0.0のng addとSchematicsを使ってAngularMaterialを簡単セットアップ


Angular CLI v6で追加される`ng add`コマンドとAngular MaterialのSchematicsを使ってAngular Materialのセットアップを行ってみました。
Angularプロジェクトの作成を含め、たった数コマンドと数行のコードで次のようなダッシュボードUIを作成することができました。

<img width="1207" alt="スクリーンショット 2018-04-22 19.23.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/79414/98786375-2abe-ef4c-8099-146fd5d85010.png">




## 事前準備

### Angular CLIのインストール

~~現在最新RC版のAngularCLIをインストールします。~~
2018/04/22 時点の最新版は、6.0.0-rc.5でしたが、以下のバグがあり`ng add`が正常に動かないようです。今回は、6.0.0-rc.4を使用して進めました。
https://github.com/angular/angular-cli/issues/10381

```
$ ng npm i -g @angular/cli@6.0.0-rc.4
```

インストールされたバージョンは次の通り。

```
$ ng -v                                                                                                                                      

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.0.0-rc.4
Node: 8.11.1
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.5.6
@angular-devkit/core         0.5.6
@angular-devkit/schematics   0.5.6
@ngtools/json-schema         1.1.0
@schematics/angular          0.5.6
@schematics/update           0.5.6
rxjs                         6.0.0-uncanny-rc.7
typescript                   2.7.2
```

### プロジェクトの作成

`ng new`で事前にプロジェクトを作成しておきます。

```
$ ng new v6-add-demo
```

### Angular Material & CDKのインストール

`ng add`コマンドを使用する際も、事前にパッケージをインストールしておく必要があります。

```
$ npm i --save @angular/material@next @angular/cdk@next
```

今回はmaterial、CDKともにv6.0.0-rc.12を使用しました。

## ng addでAngularMaterialのセットアップ

いよいよ、本題の`ng add`コマンドを使ってみます。
`ng add <package>`の形で、Angularプロジェクトに追加するパッケージを指定すると、Schematicsの機能で必要なインポートやテンプレートの展開などが行われます。(追加する側のパッケージもSchematics対応されている必要あり)

```
$ ng add @angular/material
```

実行すると、以下のようにファイルが更新されています。

```:実行結果
Installing packages for tooling via npm.
UPDATE package.json (1477 bytes)
UPDATE angular.json (4134 bytes)
UPDATE src/app/app.module.ts (423 bytes)
UPDATE src/index.html (473 bytes)
UPDATE src/styles.css (101 bytes)
```

```diff:angular.json
@@ -29,6 +29,9 @@
               }
             ],
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               {
                 "input": "src/styles.css"
               }
@@ -80,6 +83,9 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               {
                 "input": "styles.css"
               }
```

```diff:app/app.module.ts
@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
```

```diff:index.html
@@ -1,6 +1,8 @@
 <!doctype html>
 <html lang="en">
 <head>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <meta charset="utf-8">
   <title>V6AddDemoMaterial</title>
   <base href="/">
```

```diff:style.css
@@ -1 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
+
+body { margin: 0; }
```

## Schematicsでナビゲーションを作成

次に、toolbarとsidenavを作成します。


```
$ ng g @angular/material:materialNav --name=main-nav
```

```:実行結果
CREATE src/app/main-nav/main-nav.component.css (110 bytes)
CREATE src/app/main-nav/main-nav.component.html (945 bytes)
CREATE src/app/main-nav/main-nav.component.spec.ts (619 bytes)
CREATE src/app/main-nav/main-nav.component.ts (489 bytes)
UPDATE src/app/app.module.ts (803 bytes)
```

作成した`main-nav`を配置します。

```html:app/app.component.html
+ <main-nav></main-nav>
```

ここまでの状態で、`npm start`して`localhost:4200`を確認すると、次のようにtoolbarが追加されていることが確認できます。(左上のメニュークリックでsidenavも出ます)

<img width="1020" alt="スクリーンショット 2018-04-22 19.07.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/79414/132c5bfd-ecbe-73a9-1930-23e3d14d890b.png">

## Schematicsでダッシュボード風のUIを作成

Angular MaterialのSchematicsには、現在(2018/04/22)ナビゲーションの他に次のコンポーネントが含まれているようです。

* materialDashboard
* materialTable

せっかくなので、materialDashboardも試してみました。

```
$ ng g @angular/material:materialDashboard --name=dashboard
```

```:実行結果
CREATE src/app/dashboard/dashboard.component.css (254 bytes)
CREATE src/app/dashboard/dashboard.component.html (927 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (632 bytes)
CREATE src/app/dashboard/dashboard.component.ts (397 bytes)
UPDATE src/app/app.module.ts (1007 bytes)
```

作成した`dashboard`を配置します。

```html:app/app.component.html
<main-nav></main-nav>
+ <dashboard></dashboard>
```

次のように、複数のmat-cardが自動で配置されています。

<img width="1020" alt="スクリーンショット 2018-04-22 19.16.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/79414/74d48c0d-ed64-b45e-34cb-3caca941501b.png">

以上です🙃

## 注意

今回は使用したAngularおよび、AngularMaterialはまだRCのため、今後仕様が変更になる可能性もあります。実際に使用する際は、その時点での公式ドキュメントを確認することをおすすめします。

## 参考

https://github.com/angular/angular-cli/wiki/add
https://github.com/angular/angular-cli/releases/tag/v6.0.0-beta.5
https://qiita.com/puku0x/items/1024af7860588caafcc6