【Angular Material】ng add @angular/materialでエラー

angularのロゴ画像

Angularが提供するマテリアルデザインライブラリであるAngular Materialを使いたくてインストールしてみた。

公式サイト通りにやろうとしたけどエラーが出たので、ググって別の方法でインストールした。

無事アプリは動いたのでインストール自体は成功。

その方法を残しておきます。

【公式】ng add @angular/materialコマンドではエラー

Angular Materialの公式サイトのガイドに沿ってインストールしようとした。

ng add @angular/material

すると下の画像のようになった。

Angular Materialインストール方法の画像

Cannot find moduleのエラー。

それだけでなくrxjsのバージョンが古い、@angular/cdkのバージョンが古いという警告が出た。

Angular Materialの公式サイトのガイドによれば、@angular/cdkng add @angular/materialでインストールされるはず。

Angular Materialインストール方法の画像

ということで、rxjsをアップデートしようと思った。

ng updateで確認したら、たしかにrxjsが更新できるとのことだったので、ng update rxjsrxjsをアップデートした。

Angular Materialインストール方法の画像

ただrxjsをアップデートしたからといって、ng add @angular/materialを再度実行しても同じ「Cannot find module」エラーが出た。

おっくソ

エラーはrxjsのバージョンのせいじゃなかったのね。。

npm installでライブラリをインストールする

ググってみると、ng add @angular/materialではなく、npm installでライブラリを直接インストールする方法がいけそう。

ng add @angular/materialでインストール予定だった、@angular/material@angular/cdk@angular/animationsを以下のコマンドでインストールする。

コマンド
npm install --save @angular/material @angular/cdk @angular/animations

Angular Materialインストール方法の画像

無事成功。

おっくソ

よかったよかった

公式ガイドに沿っていく

@angular/material@angular/cdk@angular/animationsをインストールできたら、あとは公式ガイドに沿って続きをやっていくイメージ。

HammerJSをインストールする

タッチジェスチャーを使いやすくする、Hammerjsをインストールする。

タッチジェスチャーとは、僕らがスマホで行うスワイプやピンチインなどのタッチ操作のこと。

コマンド
npm install --save hammerjs

インストールしたら、./src/main.tsにインポートする。

Angular Materialインストール方法の画像
引用: Angular Materialのインストールから使い始めまで

BrowserAnimationsModuleをapp.module.tsにインポート

app.module.tsBrowserAnimationsModuleをインポートする。

Angular Materialインストール方法の画像
引用: Angular Materialのインストールから使い始めまで

マテリアルアイコンを読み込む

Angular Materialインストール方法の画像

マテリアルアイコンと呼ばれるアイコンをhtml上でタグを使って表現できる。

そのためのリソースを読み込む。

まあ使わないなら不要だろうけど。

どうやらng add @angular/materialやると自動で追加されるよう。

今回はnpm installでいろいろインストールしたので、自動で追加されていなかった。

ということで以下のコードを./src/index.htmlに追加する。

コード
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Angular Materialインストール方法の画像
引用: Angular Materialのインストールから使い始めまで

Robotoフォントを読み込む

マテリアルアイコンと一緒に以下のコードも./src/index.htmlに追加する。

コード
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

Robotoというフォントで、これもng add @angular/materialだと自動で追加されるよう。

styles.cssにスタイルを定義

Angular Materialに用意されているCSSを読み込むためにインポートする。

コード
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

そして先ほど読み込んだRobotoフォントを適用する。

ということでstyles.cssが以下のようになった。

Angular Materialインストール方法の画像

使いたいモジュールをインポートするだけ

ここまで来たら、あとは使いたいAngular Materialの部品を選んで、そのためのモジュールをインポートして、使うだけ。

試しにボタンを使ってみる。

ボタンはMatButtonModuleをインポートする必要があるので、下の画像のようにapp.module.tsインポートした。

Angular Materialインストール方法の画像

あとは使いたいボタンをタグで設定するだけ。

今回はmat-raised-buttonを指定して、STARTボタンを作る。

コード
<button mat-raised-button >START</button>

このコードをapp.module.tsに紐付くComponentのhtml(デフォルトならapp.component.html)に書く。

Angular Materialインストール方法の画像

ちゃんとマテリアルデザインのボタンになった。

おっくソ

こんな簡単にマテリアルデザインになるなんて

ちなみに何も指定しない<button >START</button>の場合はこんな感じ。

Angular Materialインストール方法の画像

 

今回はボタンを使いたかったから、MatButtonModuleをインポートしたわけだけど、使いたい部品によってインポートすべきModuleが違う。

じゃあ何を見れば分かるのかというと、Angular Material公式サイトのそれぞれの部品(Componentsタグ)のAPIというタグに記載されている。

確かにボタンの所を見ると、MatButtonModuleをインポートしろと書いてある。

Angular Materialインストール方法の画像

最後に

ng add @angular/materialでうまくいかなかったけど、無事npm installなどを使って、Angular Materialをインストールして使うことに成功。

最後にお世話になったリンクを紹介しておきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です