angular
angularMaterial

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

More than 1 year has passed since last update.

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

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


material2のバージョン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.

こちらはソースを修正する必要がある。ありがたいことに公式が置換ツールを用意してくれた。

作業

md プレフィックス変更

公式の 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: [
      ..

これで無事動いた。