angular 8 でangular materialを使いたいのに他のモジュールのエラーが出てしまい、よく分かりません

###ごあいさつ
Angularを触り始めて1か月の未熟者です。
ブログきなこもちさんのブログと公式ドキュメントangularの公式サイト angular materialの公式サイトを参考にしています。

###うまくいかないこと
私もブログと同じようなこと（リストのアプリなど）がしたいと思い、
angular materialの公式サイトを参考に、ng addでインストールをしたのですが、どうもうまくいきません。
windowsの環境です。
なにかインストールに関し、tipsがあれば教えてほしいです。

###具体的な話
app.module.tsで

typescript
1import { MatNativeDateModule } from '@angular/material/core';

を入力すると、

ERROR in ../../../node_modules/@angular/material/core/typings/common-behaviors/common-module.d.ts(9,30): error TS2307: Cannot find module '@angular/platform-browser'.    
../../../node_modules/@angular/material/core/typings/gestures/gesture-config.d.ts(9,37): error TS2307: Cannot find module '@angular/platform-browser'.

というエラーがでてきて、コンパイルが通りません。
ちなみに、app.module.tsの他のインポートは

typescript
1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppRoutingModule } from './app-routing.module';
5import { AppComponent } from './app.component';
6
7import { FormsModule } from '@angular/forms';

という感じです。
ではまだ入ってないんじゃないか？と思ってインストールしようとしてみると、

PS C:\uuuu\xxxxxxx\mysource\ang_app\ang-jansix> ng add @angular/material
Skipping installation: Package already installed
An unhandled exception occurred: Cannot find module '@angular-devkit/schematics/tasks'
Require stack:
- C:\uuuu\xxxxxxx\node_modules\@angular\material\schematics\ng-add\index.js
- C:\uuuu\xxxxxxx\mysource\ang_app\ang-jansix\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\uuuu\xxxxxxx\mysource\ang_app\ang-jansix\node_modules\@angular-devkit\schematics\tools\index.js
- C:\uuuu\xxxxxxx\mysource\ang_app\ang-jansix\node_modules\@angular\cli\utilities\json-schema.js
- C:\uuuu\xxxxxxx\mysource\ang_app\ang-jansix\node_modules\@angular\cli\models\command-runner.js
- C:\uuuu\xxxxxxx\mysource\ang_app\ang-jansix\node_modules\@angular\cli\lib\cli\index.js
- C:\uuuu\xxxxxxx\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\uuuu\xxxxxxx\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
See "C:\uuuu\xxxxxxx\AppData\Local\Temp\ng-j59M29\angular-errors.log" for further details.

となります。
schematicsも入ってるのに、どうしたんだろう、、という疑問がわきます。

また、バージョンは以下のようです。
（ang-jansixというワークスペースを作って、その下で開発しています。）
よろしくお願いします。

PS C:\uuuu\xxxxxxx\mysource\ang_app\ang-jansix> npm -v
6.12.1
PS C:\uuuu\xxxxxxx\mysource\ang_app\ang-jansix> ng --version
Angular CLI: 8.3.21
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.21
@angular-devkit/build-angular     0.803.21
@angular-devkit/build-optimizer   0.803.21
@angular-devkit/build-webpack     0.803.21
@angular-devkit/core              8.3.21
@angular-devkit/schematics        8.3.21
@angular/cli                      8.3.21
@ngtools/webpack                  8.3.21
@schematics/angular               8.3.21
@schematics/update                0.803.21
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

行動規範の内容に同意します

回答1件

変更前は問題は起こらなかったのですか？
その　import ラインが問題だと特定できたのですか？

投稿2020/01/08 03:52

mmaeda

総合スコア269

yyone

2020/01/08 06:31

ご指摘ありがとうございます。変更前は、問題は起こっていませんでした。 importのエラーを詳しく見ますと、（最初の投稿のエラー文です） materialの下の下の下くらいにあるcommon-module.d.tsとgesture-cinfug.d.tsの、 import { HammerLoader } from '@angular/platform-browser'; や import { HammerGestureConfig } from '@angular/platform-browser'; でエラーが起こっていると書いてありました。そこで、npmでグローバルにインストールしているパッケージを、npm listでチェックしてみました。 C:\uuuuu\xxxxxxx +-- @angular/animations@8.2.14 | `-- tslib@1.10.0 +-- @angular/cdk@8.2.3 | +-- parse5@5.1.1 | `-- tslib@1.10.0 deduped +-- UNMET PEER DEPENDENCY @angular/common@8.2.14 | `-- tslib@1.10.0 deduped +-- UNMET PEER DEPENDENCY @angular/core@8.2.14 | `-- tslib@1.10.0 deduped +-- @angular/forms@8.0.0 | `-- tslib@1.10.0 deduped +-- @angular/material@8.2.3 | `-- tslib@1.10.0 deduped +-- UNMET PEER DEPENDENCY @angular/platform-browser@8.0.0 +-- core-js@3.6.0 +-- rxjs@6.4.0 | `-- tslib@1.10.0 deduped `-- zone.js@0.9.1 npm ERR! peer dep missing: @angular/common@8.0.0, required by @angular/forms@8.0.0 npm ERR! peer dep missing: @angular/core@8.0.0, required by @angular/forms@8.0.0 npm ERR! peer dep missing: @angular/platform-browser@8.0.0, required by @angular/forms@8.0.0 依存しているcommonやcoreやplatform-browserを以下のようにnpm installでインストールしてみました。 PS C:\uuuuu\xxxxxxx> npm install -g @angular/platform-browser npm WARN @angular/platform-browser@8.2.14 requires a peer of @angular/core@8.2.14 but none is installed. You must install peer dependencies yourself. npm WARN @angular/platform-browser@8.2.14 requires a peer of @angular/common@8.2.14 but none is installed. You must install peer dependencies yourself. + @angular/platform-browser@8.2.14 added 2 packages from 2 contributors in 1.795s PS C:\uuuuu\xxxxxxx> npm install -g @angular/common npm WARN @angular/common@8.2.14 requires a peer of rxjs@^6.4.0 but none is installed. You must install peer dependencies yourself. npm WARN @angular/common@8.2.14 requires a peer of @angular/core@8.2.14 but none is installed. You must install peer dependencies yourself. + @angular/common@8.2.14 added 2 packages from 2 contributors in 7.37s PS C:\uuuuu\xxxxxxx> npm install -g @angular/core npm WARN @angular/core@8.2.14 requires a peer of rxjs@^6.4.0 but none is installed. You must install peer dependencies yourself. npm WARN @angular/core@8.2.14 requires a peer of zone.js@~0.9.1 but none is installed. You must install peer dependencies yourself. + @angular/core@8.2.14 added 2 packages from 2 contributors in 3.424s PS C:\uuuuu\xxxxxxx> npm install -g rxjs + rxjs@6.5.4 added 2 packages from 7 contributors in 10.402s PS C:\uuuuu\xxxxxxx> npm install -g zone.js + zone.js@0.10.2 added 1 package from 1 contributor in 2.728s しかし、同じエラー（投稿に記載のエラー）は、ng serveしなおしても消えませんでした。（参考にしたサイトは、 <https://ja.stackoverflow.com/questions/52936/npm-%E3%81%AE-has-unmet-peer-dependency-%E3%81%A8%E3%81%AF%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E7%8A%B6%E6%85%8B%E3%81%A7%E3%81%99%E3%81%8B> <https://kotaeta.com/63303447> <https://techacademy.jp/magazine/16105>）

mmaeda

2020/01/08 07:00

npm パッケージのインストール先には、グローバルと、ローカルがあって、-g オプションはグローバルの時に使いますが、@angular/cli 以外はグローバルにインストール必要はないはずです。一度環境をリセットするといいかもしれません。試しに，空のプロジェクトを作ってみるといいかも。 cd C:\uuuu\xxxxxxx\mysource\ang_app ng new test-app cd test-app ng build ng add @angular/material ng build -- その後、import のラインを追加して。 ng build -- もしこれが動作したら、package.json を比較してみてください。 -- パッケージはすべてローカルの node_modules フォルダに保存されてます。 -- 元のプロジェクトに戻って、package-lock.json と node_modules フォルダを削除したあと、npm install を実行すると復元できます。 -- その後、ng build を実行してみてください。

yyone

2020/01/09 00:42

何度もありがとうございます。試してみましたが、ワーニングやエラーが出ます、、以下にまとめてみましたので、何かコメントや助言などいただけないでしょうか、、 ①cd C:\uuuu\xxxxxxx\mysource\ang_app ②ng new test-app ③cd test-app ④ng build ⑤ng add @angular/material ⑥ng build ⑦-- その後、import のラインを追加して。 ⑧ng build と番号を振らせていただきました ①～②ng new ang-matetestで、なにかワーニングは出てるが一応通ってる ③～④そのプロジェクトに移動して、ng buildすると、以下のようにコンソールに出てくる。通ってるっぽい Generating ES5 bundles for differential loading... ES5 bundle generation complete. chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 264 kB [initial] [rendered] chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered] chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered] chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 10.1 kB [initial] [rendered] chunk {styles} styles-es5.js, styles-es5.js.map (styles) 11.4 kB [initial] [rendered] chunk {main} main-es2015.js, main-es2015.js.map (main) 48.1 kB [initial] [rendered] chunk {main} main-es5.js, main-es5.js.map (main) 51.7 kB [initial] [rendered] chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 683 kB [initial] [rendered] chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 3.75 MB [initial] [rendered] chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 4.54 MB [initial] [rendered] Date: 2020-01-09T00:10:25.240Z - Hash: 31d371450d29e85d0965 - Time: 40155ms ⑤ng add @angular/materialすると、空のプロジェクトのはずなのに、既に入っている、みたいなことを言われる Skipping installation: Package already installed An unhandled exception occurred: Cannot find module '@angular-devkit/schematics/tasks' Require stack: - C:\uuuu\xxxxxxx\node_modules\@angular\material\schematics\ng-add\index.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\tools\export-ref.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\tools\index.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular\cli\utilities\json-schema.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular\cli\models\command-runner.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular\cli\lib\cli\index.js - C:\uuuu\xxxxxxx\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js - C:\uuuu\xxxxxxx\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng See "C:\uuuu\xxxxxxx\AppData\Local\Temp\ng-tC9mYM\angular-errors.log" for further details. logファイルは以下の通り [error] Error: Cannot find module '@angular-devkit/schematics/tasks' Require stack: - C:\uuuu\xxxxxxx\node_modules\@angular\material\schematics\ng-add\index.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\tools\export-ref.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\tools\index.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular\cli\utilities\json-schema.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular\cli\models\command-runner.js - C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular\cli\lib\cli\index.js - C:\uuuu\xxxxxxx\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js - C:\uuuu\xxxxxxx\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15) at Function.Module._load (internal/modules/cjs/loader.js:690:27) at Module.require (internal/modules/cjs/loader.js:852:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (C:\uuuu\xxxxxxx\node_modules\@angular\material\schematics\ng-add\index.js:10:17) at Module._compile (internal/modules/cjs/loader.js:959:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) at Module.load (internal/modules/cjs/loader.js:815:32) at Function.Module._load (internal/modules/cjs/loader.js:727:14) at Module.require (internal/modules/cjs/loader.js:852:19) at require (internal/modules/cjs/helpers.js:74:18) at new ExportStringRef (C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\tools\export-ref.js:18:25) at NodeModulesEngineHost._resolveReferenceString (C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\tools\node-module-engine-host.js:94:21) at NodeModulesEngineHost.createSchematicDescription (C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\tools\file-system-engine-host-base.js:179:34) at SchematicEngine.createSchematic (C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\src\engine\engine.js:219:38) at CollectionImpl.createSchematic (C:\uuuu\xxxxxxx\mysource\ang_app\ang-matetest\node_modules\@angular-devkit\schematics\src\engine\engine.js:69:29) ⑥とりあえずng buildすると、何かが増えている Generating ES5 bundles for differential loading... ES5 bundle generation complete. chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 683 kB [initial] [rendered] chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 264 kB [initial] [rendered] chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered] chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered] chunk {main} main-es2015.js, main-es2015.js.map (main) 48.1 kB [initial] [rendered] chunk {main} main-es5.js, main-es5.js.map (main) 51.7 kB [initial] [rendered] chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 3.75 MB [initial] [rendered] chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 4.54 MB [initial] [rendered] chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 10.1 kB [initial] [rendered] chunk {styles} styles-es5.js, styles-es5.js.map (styles) 11.4 kB [initial] [rendered] Date: 2020-01-09T00:12:44.833Z - Hash: 31d371450d29e85d0965 - Time: 16932ms ⑦～⑧ng buildすると、以下のように、投稿と同じエラーになります、、 ERROR in ../../../node_modules/@angular/material/core/typings/common-behaviors/common-module.d.ts:9:30 - error TS2307: Cannot find module '@angular/platform-browser'. 9 import { HammerLoader } from '@angular/platform-browser'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ../../../node_modules/@angular/material/core/typings/gestures/gesture-config.d.ts:9:37 - error TS2307: Cannot find module '@angular/platform-browser'. 9 import { HammerGestureConfig } from '@angular/platform-browser';

mmaeda

2020/01/09 03:29

npm のキャッシュをクリアしてやり直してみましょう。 cd C:\uuuu\xxxxxxx\mysource\ang_app rmdir /s .\angmatetest npm cache clean --force もう一度最初からやってみる。

mmaeda

2020/01/09 04:02

あとは　グローバルインストールのリセットですが、もし覚えていれば、npm install <パッケージ名> -g でインストールしたものを全て、npm uninstall <パッケージ名> -g でアンインストールします。

mmaeda

2020/01/13 01:20

解決策見つかりませんでしたか？奥の手は、node パッケージを一度アンインストールして、環境をリセットしてやり直すことです。

yyone

2020/01/13 09:54

返事が遅くなってしまってすみません．まだ解決できていません．教えてくださったおかげで，雑にグローバルにインストールしていたことが一番よくなかった，ということが分かりました．今作りかけのものがあって，今すぐアンインストールできないのが申し訳ないです，，（動かなくなるのが怖いので，，，）ちゃんと時間を作って解決したいと思っています．

行動規範の内容に同意します