Angular Material 2.0.0-beta.11 アップデート


**2017.11.07 追記**
この記事中に出てくる `MATERIAL_COMPATIBILITY_MODE` は使用不可になりました。バージョン5.0.0-rcでは、 `mat-` プレフィックスを使用するのがデフォルトとなっています。モードを明示的に指定しなくても、 `mat-` セレクタのみを使用するようになったということです。

古い記事など(現時点で公式Docにもまだ残っている)にはセレクタに `md-` を使っているものがありますが、正式版では `mat-` を使用することになりそうです。

---

[material2のバージョン2.0.0-beta.11](https://github.com/angular/material2/releases/tag/2.0.0-beta.11) における破壊的変更の対応

- `MaterialModule` が削除された。

今までは modules.ts に `MaterialModule` だけインポートしておけばコンポーネントを利用できたが、最小単位（コンポーネント個別）でインポートするように変更された。

- `md`プレフィックスが非推奨になった。

```
## Deprecation of "md" prefix.

For beta.11, we've made the decision to deprecate the "md" prefix completely and use "mat" moving
forward. This affects all class names, properties, inputs, outputs, and selectors (CSS classes were
changed back in February). The "md" prefixes will be removed in the next beta release.
```

こちらはソースを修正する必要がある。ありがたいことに公式が[置換ツール](https://www.npmjs.com/package/angular-material-prefix-updater)を用意してくれた。

## 作業
### `md` プレフィックス変更
公式の [angular/material-prefix-updater](https://github.com/angular/material-prefix-updater) に従う。

#### 1. ツールを使用して `md-` を `mat-` に置換する

```
D:\develop\repositories\git\02_github\ne-peer\deredorm (master)
λ npm i -g angular-material-prefix-updater

D:\develop\repositories\git\02_github\ne-peer\deredorm (fix/md-prefix-change)
λ mat-switcher -p src\tsconfig.json

Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/app.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/app.component.css
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/oauth/oauth.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/side-navbar/side-navbar.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/manage/dere-list/dere-list.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/manage/dere-list/dere-list.component.css
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/manage/unit-detail/unit-detail.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/manage/unit-detail/unit-detail.component.css
Fixed 2 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/manage/dere-detail/dere-detail.component.ts
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/manage/dere-detail/dere-detail.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/manage/dere-detail/dere-detail.component.css
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/action/dere-autocomplete/dere-autocomplete.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/manage/unit-list/unit-list.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/action/unit-autocomplete/unit-autocomplete.component.html
Fixed 1 error(s) in D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/components/layer/list/list.component.html

√ Successfully updated the project source files.
```

#### 2. `mat-` を使用するように強制する
app.modules.ts を変更。

```
// 2.0.0-beta.11で対応: This will enforce that only the "mat" prefix is used for all selectors. 
import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; 

..

  providers: [ 
    { provide: MATERIAL_COMPATIBILITY_MODE, useValue: true } 
  ], 
```

#### 3. この時点でエラーが出る

```
Uncaught Error: Template parse errors:
'mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-sidenav-container class="container-flux">
..
```

原因は `MaterialModule` をmodule.tsから消し去ったせいのようだ。このバージョンからは使用するコンポーネントはすべて個別にインポートする必要がある。

## `MaterialModule` 削除の対応
app.modules.ts を変更。必要なコンポーネントを個別でインポートする。

```
import {
  MatButtonModule,
  MatCardModule,
  MatInputModule,
  MatIconModule,
  MatListModule,
  MatSidenavModule,
  MatSnackBarModule,
  MatTabsModule,
  MatGridListModule,
  MatAutocompleteModule
} from '@angular/material';

..

@NgModule({
  declarations: [
      ..
  ],
  imports: [
    ..
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatIconModule,
    MatListModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatTabsModule,
    MatGridListModule,
    MatAutocompleteModule
  ],
  providers: [
      ..
```

これで無事動いた。