Angular material のバージョンアップで出会ったいくつかのエラーと解決方法

5785 ワード
Angular2 MaterialDesign angular-cli angularMaterial Node.js Node.js テキストリンク

Angular cli をつかって、Angular material と組み合わせてアプリを作ったが、私の環境で動いてたもの (Mac) が他の人の環境 (PC) で全く動かなかったので、何をしたかをメモしておく。

Cannot read property 'length' of undefined

npm install 後、 ng serve で発生。

ng serve
Cannot read property 'length' of undefined

これから全く想像がつかないが、src/enviornments/environment.ts に問題がある。無いばあいは、ちゃんと作らないとこのエラーが出る。

@angular/material/material"' has no exported member 'MdButtonModule'.

こちらは、angular material がアップデートされて、MdXXXX 系が使えなくなったため、MatXXX に切り替える必要があった。ts ファイルと、html の修正の必要性ありだが基本的に置換で可能。

import {
  MdMenuModule,
  MdToolbarModule,
  MdIconModule,
  MdTabsModule,
  :

を

import {
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatTabsModule,

に変える。これだけではなくて、html　も

<md-grid-list cols="2" rowHeight="1:1">
    <md-grid-tile>
            <md-card class="example-card">
                    <md-card-header>
                      <div mat-card-avatar class="example-header-image"></div>
                      <md-card-title>{{car.name}}</md-card-title>
                      <md-card-subtitle>{{car.company}}</md-card-subtitle>
                    </md-card-header>

<mat-grid-list cols="2" rowHeight="1:1">
    <mat-grid-tile>
            <mat-card class="example-card">
                    <mat-card-header>
                      <div mat-card-avatar class="example-header-image"></div>
                      <mat-card-title>{{car.name}}</mat-card-title>
                      <mat-card-subtitle>{{car.company}}</mat-card-subtitle>
                    </mat-card-header>

基本的に md- を mat- の一括置換でオッケー。これの置換を逃れたものとして

<textarea mdInput

などを


<textarea matInput

にする必要があった。

GET http://localhost:4200/sockjs-node/info?t=1508392326937 net::ERR_CONNECTION_REFUSED

これは、Angular CLI （というか、webpack)のバグっぽい。修正できないが回避策はある。ng serve してブラウザで開くときに、localhost ではなく、127.0.0.1 を使う。この回避策は、問題が起きたときのみで良いみたい。

おわりに

そんなわけで、ちょっとバージョンアップしたらいろいろ修正の必要があったが、なんとかちゃんと動くようになった。