MENU
資格取得で明るい将来を！チャレンジャー応援サイト「資格とっとこ」はこちら
  1. ホーム
  2. ライフスタイル
  3. プログラミング
  4. Angular
  5. 【Angular】「ng new (プロジェクト名)」コマンドで発生するエラーとその解決策

【Angular】「ng new (プロジェクト名)」コマンドで発生するエラーとその解決策

プログラミング Angular
「本ページには広告が含まれています。」


はじめましての人も、こんにちは。
のりです。

今回のテーマは、Angularで「ng new」コマンドを実行してもエラーが発生してしまう場合の対処法についてです。

それでは、本編をどうぞ。

 

 
質問者さん
ローカルサーバーの立ち上げは成功したけど、今度は「ng new」コマンドでエラーが発生するようになったよ！？

 

 
のり
「ng new」コマンドでエラーか。
まずは、コードの入力間違えをしていないか確認した？
 
質問者さん
あったりまえじゃん！Google先生が教えてくれた解決方法もとっくの昔に試してるよ！！何か特別な解決策を教えてよ…
 
のり
なるほど、またしてもnodistが影響しているみたいだね。
わかった、次は「キャッシュ」を削除してみよう！

 

Contents

「ng new （プロジェクト名）」とエラー


この前のAngularのローカルサーバーの立ち上げに続いて、今度は「ng new」コマンドが使えなくなりました。
とほほ…が続くのりです。

 

本題に入る前に、予備知識を。



Angularにおける「ng new」コマンドは指定フォルダの中に新規プロジェクトを構成する際に使用します。



具体的手順に関しては、各々書籍等にも載っていますが

 
  1. エクスプローラーというフォルダの親玉の中からローカルを選択
  2. ローカルの中のユーザーを選択
  3. ユーザーの中からApp Dataを選択
  4. その中にあるnpm _cacheをフォルダごと削除
 

ちなみに、App Dataに関してはWin+R、もしくはWindowsの検索窓に「％AppData%」を打ち込むことで簡単に指定のフォルダまでたどり着けます。

 

原因と対策

 

前回のローカルサーバーの立ち上げの際に、うまくいかないからと言って何回も作成したフォルダを消したり作ったりしたのが原因だったのかもしれません。

 

ローカルサーバーの立ち上げで困った際は、魔法のコード「npm config set scripts-prepend-node-path true」を。

 

「ng new (プロジェクト名)」でエラーが発生した人は、エラーの解決策で紹介した3通りを試してみてください。

 

ここで、心に留めておきたいのはエラーが発生しても「やみくもにコードを実行したりファイルやフォルダの削除を行わないこと」です。

 

既に言われたことがある人もいるかもしれませんが、間違った回答をすぐ消すのではなく残しておいて、どこが間違っているのか知ることが大事なのです。

 

ここだけは、押さえておきましょう。

 

まとめ


いかがでしたでしょうか。

僕と同じように、ある日突然ng newコマンドが実行されなくて困ってしまった初学者の助けになれれば幸いです！！

 

また、この記事の内容が気に入った方は、SNSやコメント等で教えていただけると嬉しいです！

それではまた次回、お会いしましょう。

バイバイ(^^)/

 
  1. エクスプローラーというフォルダの親玉の中からローカルを選択
  2. ローカルの中のユーザーを選択
  3. ユーザーの中からApp Dataを選択
  4. その中にあるnpm _cacheをフォルダごと削除
 

ちなみに、App Dataに関してはWin+R、もしくはWindowsの検索窓に「％AppData%」を打ち込むことで簡単に指定のフォルダまでたどり着けます。

 

原因と対策

 

前回のローカルサーバーの立ち上げの際に、うまくいかないからと言って何回も作成したフォルダを消したり作ったりしたのが原因だったのかもしれません。

 

ローカルサーバーの立ち上げで困った際は、魔法のコード「npm config set scripts-prepend-node-path true」を。

 

「ng new (プロジェクト名)」でエラーが発生した人は、エラーの解決策で紹介した3通りを試してみてください。

 

ここで、心に留めておきたいのはエラーが発生しても「やみくもにコードを実行したりファイルやフォルダの削除を行わないこと」です。

 

既に言われたことがある人もいるかもしれませんが、間違った回答をすぐ消すのではなく残しておいて、どこが間違っているのか知ることが大事なのです。

 

ここだけは、押さえておきましょう。

 

まとめ


いかがでしたでしょうか。

僕と同じように、ある日突然ng newコマンドが実行されなくて困ってしまった初学者の助けになれれば幸いです！！

 

また、この記事の内容が気に入った方は、SNSやコメント等で教えていただけると嬉しいです！

それではまた次回、お会いしましょう。

バイバイ(^^)/

 
  1. Angular開発を始めるフォルダの作成・フォルダの選択
  2. フォルダ内のターミナルを開く
  3. ng new （プロジェクト名）
  4. ローカルサーバーの立ち上げ
 

となります。ローカルサーバーの立ち上げに関しては、前回紹介したのでこちらの記事をどうぞ。

 

Angularの場合、環境構築の手順３は必須です。

しかし、ある日突然、以下のような警告がターミナル上に表示されました。

 

 


”
| Installing packages...npm WARN deprecated tslint@6.1.3: TSLint has been deprecated in
favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
（長いので一部省略）
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Owner\AppData\Roaming\npm-cache\_logs\2021-03-12T08_14_41_347Z-debug.log
× Package install failed, see above.
The Schematic workflow failed. See above.
”

 

 
のり
オ、オワッター…

 

と思ったのは最初だけです。

 

前回の教訓から、Node.jsの不具合として調べてみると解決策が得られることを知ったので、前回ほど解決するのに時間はかかりませんでした。



ターミナル上の不具合は、Node.jsの不具合。

この言葉をセットで覚えておきましょう。（実際にはちょっと違いますが…）

 

エラーの解決策

 

警告を解除して、新規プロジェクトを構築する魔法のコード…

 

が存在するわけではなく、今回はパソコン本体の方をいじくる必要があります。

 

そもそも、調べてみたところ「ng new」コマンド実行時にエラーが発生する解決策は3つほど存在します。

 

  1. 管理者モードでコマンドプロンプトを起動する。（具体的方法に関しては、こちらのサイトをご覧ください）
  2. node_modulesフォルダの削除。（具体的方法に関しては、こちらのサイトをご覧ください）
  3. キャッシュの削除

 

今回使用するのは、三番のキャッシュの削除です。


他は少し手間がかかるので、初学者にとっては難しく感じると思います。

 

ただ、すでにAngularのプロジェクトを複数抱えている人にとって3番を試すのは、他のプロジェクトへの影響も考えられるので他の2通りの解決策を試すことをお勧めします。

 

どんな不具合が生じるのかはこれからおいおい追記していきたいと思いますが、今回の対処法はあくまでAngularを始めたばかりの初学者向けであることを肝に銘じてもらえればなと思います。

 

それでは、解決策の紹介をしましょう。

 
  1. エクスプローラーというフォルダの親玉の中からローカルを選択
  2. ローカルの中のユーザーを選択
  3. ユーザーの中からApp Dataを選択
  4. その中にあるnpm _cacheをフォルダごと削除
 

ちなみに、App Dataに関してはWin+R、もしくはWindowsの検索窓に「％AppData%」を打ち込むことで簡単に指定のフォルダまでたどり着けます。

 

原因と対策

 

前回のローカルサーバーの立ち上げの際に、うまくいかないからと言って何回も作成したフォルダを消したり作ったりしたのが原因だったのかもしれません。

 

ローカルサーバーの立ち上げで困った際は、魔法のコード「npm config set scripts-prepend-node-path true」を。

 

「ng new (プロジェクト名)」でエラーが発生した人は、エラーの解決策で紹介した3通りを試してみてください。

 

ここで、心に留めておきたいのはエラーが発生しても「やみくもにコードを実行したりファイルやフォルダの削除を行わないこと」です。

 

既に言われたことがある人もいるかもしれませんが、間違った回答をすぐ消すのではなく残しておいて、どこが間違っているのか知ることが大事なのです。

 

ここだけは、押さえておきましょう。

 

まとめ


いかがでしたでしょうか。

僕と同じように、ある日突然ng newコマンドが実行されなくて困ってしまった初学者の助けになれれば幸いです！！

 

また、この記事の内容が気に入った方は、SNSやコメント等で教えていただけると嬉しいです！

それではまた次回、お会いしましょう。

バイバイ(^^)/

プログラミング Angular
Angular ng new コマンド
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

Contents