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 に問題がある。無いばあいは、ちゃんと作らないとこのエラーが出る。

ERROR in Cannot read property 'length' of undefined #5053

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

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

Build Error: @angular/material/material"' has no exported member #7692

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 を使う。この回避策は、問題が起きたときのみで良いみたい。

sockjs-node ERR_CONNECTION_REFUSED when accessing from network #416

おわりに

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