Angular7 + AngularMaterial 環境構築

# はじめに
AngularCLIを使って、最近(2018/10/19)出たAngularのバージョン７とデザインフレームワークのAngularMaterialで環境構築していきたいと思います。
基本的には公式通り。([Angular CLI](https://cli.angular.io/)、[Angular Material](https://material.angular.io/guide/getting-started))
(追記）
[GitHubにあげた。](https://github.com/dek13i/angular-edu)(AngularMaterialのSchematicsを試しに入れるぐらいまで）
ついでにバージョンが上がってたので記述を7.03から7.04にバージョンアップした。
![DemoMaterialApp.gif](https://qiita-image-store.s3.amazonaws.com/0/306393/fb69854b-3cba-61f0-299e-a935fb458ea5.gif)

# 環境構築
 * Step1〜Step3:AngularCLIでハローワールドみたいな(Welcome to App！）まで
 * Step4〜Step6:AngularMaterial入れる。
 * (おまけ)Step7〜Step8:AngularMaterialのスキーマ(自動生成されるコンポーネント)を入れて実行する。

## Step1.AngularCLI入れる（バージョン確認）
何はともあれAngularCLIを入れる。

```terminal:(ターミナル)インストールする
$ npm install -g @angular/cli
```

```terminal:(ターミナル)現在のバージョン
$ ng v

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


Angular CLI: 7.0.4
Node: 8.11.4
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.4
@angular-devkit/core         7.0.4
@angular-devkit/schematics   7.0.4
@schematics/angular          7.0.4
@schematics/update           0.10.4
rxjs                         6.3.3
typescript                   3.1.3

```





## Step2.プロジェクト作成
demo-material-appとして作成する。
以前まではオプションで--style=scssとかやっていたけど聞かれれる様になったのでそのまま実行する。ルーティングも自動で作成してくれる。
ルーティングはyでスタイルシートはSCSSで作成する。

```terminal:(ターミナル)プロジェクト作成
$ ng new demo-material-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
  CSS
❯ SCSS   [ http://sass-lang.com   ]
  SASS   [ http://sass-lang.com   ]
  LESS   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]

(・・・省略・・・)

    Successfully initialized git.
$ 
```




## Step3.実行してみる。Welcome to demo-material-app!
作成したプロジェクトに移動し、実行する。

```terminal:(ターミナル)移動して実行。
$ cd demo-material-app/
$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

(・・・省略・・・)

ℹ ｢wdm｣: Compiled successfully.

```
書いてある通り、 http://localhost:4200/ にアクセスし確認する。
![Welcome to demo-material-app!](https://qiita-image-store.s3.amazonaws.com/0/306393/4f6bba72-fc8f-1a03-0cae-9ac3ff0e0c8e.png)

## Step4.Angular Materialのインストール
Step3でローカルサーバーを実行中であればCtrl+Cで一度止める。
作成したプロジェクトの場所にいる状態で実行していく。(demo-material-app直下)
必要なものをインストールしていく。

```terminal:(ターミナル)Materialインストール
$ npm install --save @angular/material @angular/cdk @angular/animations
```

全部のコンポーネント使いたいので、hammerjsもインストールする。

```terminal:(ターミナル)hammerjsインストール
$ npm install --save hammerjs
```




## Step5.ファイルを編集していく。スタイル適用。
demo-material-app/srcを編集していく。

* スタイルを適用する。<br>
deeppurple-amber、indigo-pink、pink-bluegrey、purple-greenが用意されている。
公式通りにインディゴとピンクのものを適用する。

```scss:src/style.scss
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
```

* hammerjsをインポートする。

```ts:src/main.ts(抜粋)
import 'hammerjs';
```

<details><summary>(全文)src/main.ts</summary><div>

```ts:src/main.ts
import 'hammerjs';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

```
</div></details>

* マテリアルアイコンも使いたいので、src/index.htmlのheadタグに加える。

```html:src/index.html(抜粋)
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
<details><summary>(全文)src/index.html</summary><div>

```html:src/index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DemoApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>
```
</div></details>

* アニメーションのモジュールを入れる<br>
動きを持ったスタイルにしたい場合、BrowserAnimationsModuleをインポートする。そうでない場合は、NoopAnimationsModuleをインポートする。

```ts:src/app/app.module.ts(抜粋)
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
・・・
@NgModule({
  ・・・
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //NoopAnimationsModule,
    AppRoutingModule
  ],
・・・
```
<details><summary>(全文)src/app/app.module.ts</summary><div>

```ts:src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //NoopAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
</div></details>


## Step6.マテリアル用のモジュールを作成する。
公式のサンプルソースにもある様な感じのマテリアルのモジュールを作る。

```terminal:(ターミナル)モジュール作成
$ ng generate module shared/material --flat
```
実行するとsrc/app/shared/material.module.tsが作成される。
作成したモジュールを下記の様に編集する。
<details><summary>(全文)src/app/shared/material.module.ts</summary><div>

```ts:src/app/shared/material.module.ts
import {DragDropModule} from '@angular/cdk/drag-drop';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {NgModule} from '@angular/core';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    ScrollingModule,
  ]
})
export class MaterialModule {}


/**  Copyright 2018 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 http://angular.io/license */
```
</div></details>



# (おまけ)
Step6まででAngular Materialを利用する準備は整ったので、環境構築としては終了。
Step7ではサンプルモジュール作成して、そこにコンポーネントを入れていく。

## Step7.サンプルモジュール作成
公式のマテリアルデザインのセットを利用する。(参考：[AngularMaterialのschematics](https://material.angular.io/guide/schematics))

* スタイルの編集

```scss:src/styles.scss
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {
    margin: 0;
}

html, body{
    height: 100%;
}
```

* モジュール、ダッシュボードのコンポーネント作成。<br>
ルーティングありでモジュール作成。<br>
コンポーネントはダッシュボードの物を作成する。似た様な場所に作れば勝手にコンポーネントはモジュールに紐づいてくれる。
(使用するモジュール類も入ってくれて便利すぎて、Step6で作成したshared/material.module.tsを使わずに済んでしまった。)

```terminal:(ターミナル)モジュール作成
$ ng generate module pages/samples --routing
$ ng generate @angular/material:dashboard pages/samples/sample-dash
```
* 作成したsamples-routing.module.tsのルーティングを設定する。

```ts:src/app/pages/samples/samples-routing.module.ts(抜粋)
import { SampleDashComponent } from './sample-dash/sample-dash.component';
・・・
const routes: Routes = [
  { path: '', component: SampleDashComponent }
];
・・・
```

<details><summary>(全文)src/app/pages/samples/samples-routing.module.ts</summary><div>

```ts:src/app/pages/samples/samples-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SampleDashComponent } from './sample-dash/sample-dash.component';

const routes: Routes = [
  { path: '', component: SampleDashComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SamplesRoutingModule { }
```
</div></details>

* ルートのsrc/app/app-routing.module.tsのルーティングを設定する

```ts:src/app/app-routing.module.ts(抜粋)
・・・
const routes: Routes = [
  { path: '', loadChildren: './pages/samples/samples.module#SamplesModule' }
];
・・・
```
<details><summary>(全文)src/app/app-routing.module.ts</summary><div>

```ts:app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './pages/samples/samples.module#SamplesModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```
</div></details>

* app.component.html編集<br>
src/app/app.component.htmlのWelcome〜の部分を全部削除してrouter-outletのみにする。

```html:src/app/app.component.html
<router-outlet></router-outlet>
```






## Step8.実行する。
Step3と同じ様に実行する。　http://localhost:4200/ にアクセス。

```terminal:(ターミナル)
$ ng serve
・・・
ℹ ｢wdm｣: Compiled successfully.

```

![ダッシュボードサンプル](https://qiita-image-store.s3.amazonaws.com/0/306393/3def74e3-1cb7-cf1d-9a44-93079441a953.png)

おわり。
[はじめにでも書いたけど、GitHubのソースは色々入れて試した。(demo-material-app)](https://github.com/dek13i/angular-edu)


---
ngコマンドのgenerate等々は、１文字に省略できる。

```terminal:省略できる
$ ng generate module pages/samples
$ ng generate component pages/samples
$ ng serve

↓（省略するとこんな感じ）

$ ng g m pages/samples
$ ng g c pages/samples
$ ng s
```