Angular2
angularMaterial

VersionUpエラー Angular2Material

行ったこと

  • pakege.json の @angular/cli, cdk,, etc v4 -> v5
  • Material v5

エラー内容

Angular.v4のアプリに、途中から Angular Material を使ってみようと思ったところエラーが起きたので、その時の解消したメモ。

ERROR in Metadata version mismatch for module /node_modules/angular2-cool-storage/index.d.ts, 
found version 4, expected 3, 
resolving symbol AppModule in /src/app/app.module.ts resolving symbol AppModule in /src/app/app.module.ts

version mismatch!! と言われる。

https://stackoverflow.com/questions/47158604/error-in-metadata-version-mismatch-for-module-node-modules-angular2-cool-storag
v5 に する必要があるかも.

方法一覧

  1. CLIをアップデートする
  2. package.jsonに書かれた依存ライブラリを一括でupdateする
  3. 一つ一つ最新にする(package.json)

完了時のイメージ

Angular と Material の Version を チェックする

ng -v

VersionCheck___Angular___Material.png

変更ファイルと、確認した方がいい部分

  • .angular-cli.json の 全体, defaults部分?
  • package.jsondependencies, devDependencies
.angular-cli.json
  "defaults": {
    "styleExt": "scss",
    "component": {}
    "class": {
      "spec": false
    },
    "component": {
      "spec": false
    },
    "directive": {
      "spec": false
    },
    "guard": {
      "spec": false
    },
    "module": {
      "spec": false
    },
    "pipe": {
      "spec": false
    }P
    "service": {
      "spec": false
    }
package.json
"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0-rc.3",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.3",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    ..
    "moment": "^2.19.3",
    ..
}
"devDependencies": {
    "@angular/cli": "1.5.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.1",
    "@angular/language-service": "^5.0.0",
    "codelyzer": "^4.0.1",
    ..
    "typescript": "~2.4.2"
}

参考ドキュメント :book:

CLIをアップデートする

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

CLI アンインストールが難しい場合、その他の方法。
既存CLIをアンインストールし、再度インストールして、新しくする。
Updating Angular CLI | OFFICAL

一つ一つ最新にする(必要な気がする部分を)

$ npm i -D @angular/cli@latest
$ npm i -D @angular/***@latest
..

結構v4 多い.. @angular/** : " 4.*.* "
参考

package.jsonを一括でupdateする

$ npm i -g npm-check-updates
$ npm-check-updates -u

詳細:https://qiita.com/masterkey1009/items/b0020b61e83f21c6d4d0