[Angular5] Angular Materialが導入できない!?だったらpackage.jsonをいじろう!

この記事は2018/03/24の時点で確認したエラー回避方法を紹介しています。
エラーの原因はスナップショットビルド版を使っていたことでした。安定版を使えばややこしい対処法を実行する必要はありません。導入方法は次のリンクです。

[Angular入門] Angular5 への Angular Materialの導入方法! – まんくつ

どうしてもスナップショットビルド版にしたい場合のみこの記事を参考にしてください。

Angular Materialを導入したい!

Angular Materialを導入すればいろいろと見栄えのいいサイトが作れそう!

・・・

公式の説明通り入れてみた。

参考:Getting started | Angular Material

参考:Angular Materialのインストールから使い始めまで – Qiita

が、エラーになりました。

次のような@angular/coreに関するエラーがめっちゃ出ます。

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1118:164-170 “export ‘inject’ was not found in ‘@angular/core’

原因がよくわからないので放置していたら、親切な人が対処法を載せてくれていました。

エラー対策

⇩⇩対処法の記載サイト⇩⇩

export ‘inject’ was not found · Issue #10034 · angular/angular-cli

俺みたいに困ってる人が何人かいたみたい・・・

というわけで、対処方法を実行していきます。

package.jsonを変更します。(参考としてこちらにソースコードがあります。)

デフォルト:”@angular/cdk”: “github:angular/cdk-builds”,

次のように変更

“@angular/cdk”: “github:angular/cdk-builds#89f40f293288fc8e568cc01c7b79d31e25c61de0”,

デフォルト:”@angular/material”: “github:angular/material2-builds”,

次のように変更

“@angular/material”: “github:angular/material2-builds#8873f67f2988f214d09b55b15f2e10a5d9b5bb0d”,

書き換えた後は、

npm install

で再インストールが必要です。

すると正常にAngular Materialが表示されます。

サンプルページはこちら

Angular Materialとしては次のモジュールを使っています。

  • MatInputModule
  • MatCardModule
  • MatDividerModule
  • MatListModule

インプット、カード、仕切り、リストのAngular Materialを使用しています。

ただ気になるのが警告がでることです。

@angular/cdk@6.0.0-beta.4-c28549d requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@6.0.0-beta.4-c28549d requires a peer of @angular/common@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@6.0.0-beta.4-c28549d requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@6.0.0-beta.4-c28549d requires a peer of @angular/common@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.

エラー対処で@angular/cdkと@angular/materialのベータ版を入れたから次の二つもベータ版にしてねということでしょう。

  • @angular/core
  • @angular/common

この警告を無視したらどうなるかわかりませんが、導入できたので良しとしましょう。

ソースコード

package.json

.angular-cli.json

index.html

styles.css

main.ts

app.module.ts

app.component.ts

app.component.html

app.component.css

それではすてきなAngularライフを👋

シェアする

  • このエントリーをはてなブックマークに追加

フォローする