質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.20%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 568

yyone

score 7

ごあいさつ

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

うまくいかないこと

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

具体的な話

app.module.tsで

import { 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の他のインポートは

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { 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
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/09 13:02

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

    キャンセル

  • 2020/01/13 10:20

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

    キャンセル

  • 2020/01/13 18:54

    返事が遅くなってしまってすみません.
    まだ解決できていません.

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる