Ionic3にAngular-materialを導入してみる。

はじめに

現場でIonic3を使ってアプリを作っているのですが、webviewで表示されるページでAngular-materialを使用しており、ネイティブとwebページでデザインが変わってしまうということでネイティブ側すなわちIonic側にもAngular-materialを導入しようということで試してみましたがところどころハマった部分があったため、記録も兼ねて共有します😃

注意事項

ionic startコマンドで既にアプリのテンプレートが作成されている前提で進めていきます。

Angularのバージョンを確認する。

package.jsonに記載されている @angular/coreのバージョンを確認します。

package.json

// 省略
"dependencies": {
  "@angular/core": "5.2.11"
}

Angular-materialのGetting startedに書かれている、

$ npm install --save @angular/material @angular/cdk @angular/animations

でインストールした場合、IonicのAngularのバージョンによっては

Typescript Error Type 'ElementRef' is not generic.

とエラーが表示されうまく動きません。
何故かというと、Ionic3のAngularのバージョンとAngular-material等々のバージョンが違うためです。
そこでインストールする際はバージョンを指定してあげる必要があります。

Angular-materialをインストールする。

前項で説明した通り、 バージョンを指定して Angular-material等をインストールします。
Angular5.x.xの場合、

$ npm install --save @angular/material@5.2.5 @angular/cdk@5.2.5 @angular/animations@5.2.11

※各バージョンは2019/01/08時点で5.x.x系で最新のもの。

app.module.tsにModuleを追加する。

※今回は例で、FormField, Input, Button, Iconを使用しました。

app.module.ts

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import {
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
} from "@angular/material";

@NgModule({
    // 省略
    imports: [
        BrowserAnimationsModule
    ]
})

IonicにAngular-materialのcssを読み込ませる。

この手順を行わないと例えば、

hoge.html

<mat-form-field>
    <input matInput placeholder="input">
</mat-form-field>

と書いたとき、

このようにplaceholderの上にtextフォームが来てしまいうまく表示されません。
そのため自分でAngular-materialのCSSを読み込ませる設定をする必要があります。

node_modules/@ionic/app-scripts/config配下にあるcopy.config.jsをどこでもいいのですが、今回はプロジェクトディレクトリ直下のpackage.json(以降package.jsonとする)と同じ階層にコピペします。
その後、このコピペしたファイルに以下の設定を追加します。

copy.config.js

  // 省略
  copyAngularMaterialCss: {
    src: ['{{ROOT}}/node_modules/@angular/material/prebuilt-themes/indigo-pink.css'],
    dest: '{{WWW}}/assets/css'
  }
}

その後、package.jsonに以下の設定を追加します。

package.json

  // 省略
  "config": {
    "ionic_copy": "./copy.config.js"
  }

これで、package.jsonのconfigに指定されたjsファイルをIonicのビルド時に読み込み、www/assets/css配下にindigo-pink.cssがコピーされます。

最後に、src配下のindex.htmlに以下のタグを追加します。

  <link href="assets/css/indigo-pink.css" rel="stylesheet"/>

実行してみる。

$ ionic serve

以下のように表示されるはずです。

入力フォームにフォーカスを当てると…

このようにフワッとアニメーション付きで入力できるようになります。

最後に

簡単に導入できると思いきや、バージョン、スタイルの２箇所で躓きました。ただ以前と違って英語の記事等に抵抗が(前よりかは)無くなったので、意外と時間かからず解決できました。英語勉強するのって大事ですね。

参考リンク

Type 'ElementRef' is not generic
Ionic Angular Material Integration
Ionic developer-resources/app-scripts/
npm @angular/material
npm @angular/cdk
npm @angular/animations