npm ERR! peer dep missing ～ のエラーを解決したい

Question

前提・実現したいこと

VScodeがクラッシュ？または更新？があってから、ng serve をするとエラーがでるようになってしまった。
npm ls　をしてみたところ、以下のようなエラーがでていました。

エラーメッセージ
npm ERR! peer dep missing: @angular/common@^2.2.3, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/common@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: @angular/compiler@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: @angular/core@^2.2.3, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/core@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: zone.js@^0.7.2, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/cdk@2.0.0-beta.12, required by @angular/material@2.0.0-beta.12

試したこと

・上記のものをインストールし直した　→　何故かインストールができない
・node_modulesの削除　→　キャッシュクリーン　→　npm install
・Angularcilを入れ直した
・npmのバージョンをあげてみた（通常は3.10.9です）

補足情報（FW/ツールのバージョンなど）

npm:3.10.9
node:6.9.2
webpack:1.14.0

Answer 1

errorみるとそもそものangularのバージョンが古いっぽいです。
magendaさんの話通りに

1. global のnodeをアップデート
2. node modules消す
3. angular cli（global と localともに）
4. package lockもアップデート「cli対応 module以外も対応させる

くらいでいけるとおもいます

Comments

[miranofoo]

初歩的な質問で申し訳ないのですが、今までこのバージョンで動いていたのですが急に動かなくなる事ってよくあるんですか？
また、Angularのバージョンは変えずに動かす方法などはありますでしょうか？

[Gma_Gama]

新しくライブラリ入れたりした時に、入れたライブラリが他のパッケージと依存している時に起きることがあると思ってます。

今回のケースでいうと、
angularのflex layoutとangular materialを入れた事が原因かと。

元々入っていたangularのバージョンが古いためmaterialとflexが使えません依存エラーみたいに思ってもらえると理解が捗ると思います。

バージョンの管理ファイルは
yarn.lockかpackage.lock.jsonが該当します。

答えになってるかな？？

[miranofoo]

ありがとうございました。
原因が分かって良かったです。

Answer 2

npmを最新バージョンにしてもう一度node_modulesの削除とかの作業をやりなおしてみてはいかがでしょーか

Comments

[miranofoo]

npm install -g npm(バージョン6.9.0)　→　node_modules削除　→　npm cache clean --force → npm install

回答ありがとうございます。
上記の工程をやってみたのですが、変わらずエラーがでてしまいました。

npm WARN @angular/flex-layout@2.0.0-rc.1 requires a peer of @angular/common@^2.2
.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@2.0.0-rc.1 requires a peer of @angular/core@^2.2.3
but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@2.0.0-rc.1 requires a peer of zone.js@^0.7.2 but n
one is installed. You must install peer dependencies yourself.
npm WARN @angular/material@2.0.0-beta.12 requires a peer of @angular/cdk@2.0.0-b
eta.12 but none is installed. You must install peer dependencies yourself.
npm WARN angular2-drag-scroll@1.5.2 requires a peer of @angular/common@^5.0.0 bu
t none is installed. You must install peer dependencies yourself.
npm WARN angular2-drag-scroll@1.5.2 requires a peer of @angular/compiler@^5.0.0
but none is installed. You must install peer dependencies yourself.
npm WARN angular2-drag-scroll@1.5.2 requires a peer of @angular/core@^5.0.0 but
none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

audited 10566 packages in 16.583s
found 25 vulnerabilities (13 low, 5 moderate, 7 high)
run `npm audit fix` to fix them, or `npm audit` for details

[退会済みユーザー]

依存関係の警告でてますねー
各パッケージもアップデートしてみてはいかがでしょーか

[miranofoo]

各パッケージのアップデートをしたのですがエラー変わりませんでした・・
やり方が何か違っているのでしょうか？
npm update @angular/common を上から全て行いました。

Answer 3

npm run ng -- serve

で、localのngコマンドでserveする