【対処法】Angular9に上げたら「@angular/material/index.d.ts is not a module.」というエラーが出た！【Angular Material】

先日Windows10の開発環境を更新する機会がありました。

Angular7でAngular Materialを使っているプロジェクトがあったので、「せっかくだしAngular9に上げてみようかな？」とか思いながら作業を進めたところ、表題のエラーが発生したのです。。

今までは問題なくビルドできていたのに、Angular9に上げてからAngular Materialのビルドが失敗します。

調べたところ、Angular9からはAngular Materialのインポート方法が少し変わったようです。

修正したところ、問題なく動くようになりましたので、同じように困っている方向けに記事にまとめようと思います。

そんなわけで、今回はAngular9に更新したら@angular/material/index.d.ts is not a module.が出た場合の対処法について、ご紹介しますね。

今回のエラーが発生した環境は以下の通りです。

• OS：Windows10 Pro 64ビット
• Angular CDK：9.2.0
• Angular CLI：9.1.0
• Angular Material：9.2.0

原因はAngular Materialのインポート方法の変更にあった！

さてさて、今回エラーが発生したファイルはapp.module.tsです。
今までは以下のように記述していました。

// app.module,ts
import { MatTableModule, MatToolbarModule } from '@angular/material';

どうやら、Angular9の変更で、このように一括でインポートする方法はダメになったようです。

公式にも記載されていました。

Breaking changes:
・Components can no longer be imported through “@angular/material”. Use the individual secondary entry-points, such as @angular/material/button.

GitHub : angular/components/CHANGELOG.md

Angular9からは以下のように個別でインポートするスタイルに変更になっています。

// app.module.ts
import { MatTableModule } from '@angular/material/table'
import { MatToolbarModule } from '@angular/material/toolbar'

今までの一括インポートに慣れていると、個別にインポートするのはちょっと面倒かもしれませんね。

ですが、未使用のモジュールまでインポートしてしまって、気づいたらアプリのサイズが肥大化してしまうことを考えると、この方がいいと思います。

特にAngularですとアプリのサイズが初回ロード時間に直結するので、特別な事情がなければユーザービリティ的にも個別インポートの方が良さそうですね。

終わりに

今回はAngular9に更新したら@angular/material/index.d.ts is not a module.が出た場合の対処法について、ご紹介しました。

以上です。それでは！