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
を使う。この回避策は、問題が起きたときのみで良いみたい。
おわりに
そんなわけで、ちょっとバージョンアップしたらいろいろ修正の必要があったが、なんとかちゃんと動くようになった。