Zenn
🌚

Angular@cliでng newするとエラーになる

2021/07/14に公開
Angular
Node.js
npm
macOS
tech

現象

ng newコマンドで下記のようなエラーが出るようになった。
何らかの依存関係が解決できなくてプロジェクトを初期化出来ない様子

% ng new           
? What name would you like to use for the new workspace and initial project? p
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
⠏ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: p@0.0.0
npm ERR! Found: jasmine-core@3.7.1
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.7.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/hashito/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hashito/.npm/_logs/2021-07-13T11_51_15_412Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

ちなみに、何度試しても同じ異常になり、進めない。

解消方法

npm cache verifyにてnpmのキャッシュを削除する。

%sudo npm cache verify  

Cache verified and compressed (~/.npm/_cacache)
Content verified: 8249 (693561265 bytes)
Content garbage-collected: 9 (157571 bytes)
Index entries: 11702
Finished in 30.113s

→復旧しない

sudo npm cache clear --forceにてnpmの強制キャッシュ削除をする。

% sudo npm cache clear --force   
npm WARN using --force Recommended protections disabled.

→復旧しない

sudo npm install -g @angular/cliで最新のngモジュールを再インストールしてみる。

% sudo npm install -g @angular/cli
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

changed 235 packages, and audited 236 packages in 12s

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

→復旧しない

裏で起動していたng serveを止めてみる。

✔ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names |     Size
main.js             | main  | 93.37 kB

6 unchanged chunks

Build at: 2021-07-13T07:42:47.017Z - Hash: edd9f7618495d4a2aefb - Time: 421ms

✔ Compiled successfully.
^C

→復旧しない

zshで実行していたため、bashの方で実行を試してみる。

nodeコマンドが存在しない事を確認

こちらを参考にPathを通します。
Macでnode.jsをインストール、npmコマンドも使用可にする【2021.1月最新版】
https://qiita.com/non0311/items/664cf74d9ff4bad9cf46

$echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile
$nano ~/.bash_profile
add text
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

ターミナルを再起動します

$ node -v
v10.16.3
$ npm -v
6.9.0

コマンドが通る事がわかります。

$ ng new
Node.js version v10.16.3 detected.
The Angular CLI requires a minimum Node.js version of either v12.14 or v14.15.

Please update your Node.js version or visit https://nodejs.org/ for additional instructions.

node.jsのバージョンを上げてみる

しかし、node.jsのバージョンが古すぎてうまく動作しません。
nodebrewを利用していたので、バージョンを変更してみます

$ nodebrew list
v14.4.0
v14.17.1

current: v14.17.1
$ nodebrew use v14.17.1
use v14.17.1

v14.17.1になっている事がわかります。

$ node -v
v10.16.3

node.js環境が2つはいっていて干渉しているので、片方を削除する

しかし、node自体のバージョンは古いままです。
node環境が2つはいっていて、片方が古い状態である事がわかりました。

コマンドの実際の場所を確認してみます

$type node
node is hashed (/Users/hashito/.nvm/versions/node/v10.16.3/bin/node)
$type nodebrew
nodebrew is hashed (/usr/local/bin/nodebrew)

通っているpathを確認してみます。

echo $PATH
/Users/hashito/.nvm/versions/node/v10.16.3/bin:/Users/hashito/golang/go/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/hashito/.nodebrew/current/bin

/Users/hashito/.nvm/versions/node/v10.16.3/binというPathがあり、それを先に見つけてしまうため、古いnodeを参照してしまうようです。

環境変数の設定を確認します。

~/.bash_profile 
GOPATH=$HOME/golang/go
export PATH=$GOPATH/bin:$PATH
export GO111MODULE=on
export PATH=$PATH:$HOME/.nodebrew/current/bin
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
~/.bashrc 
source ~/.nvm/nvm.sh

~/.nvm/nvm.sh内で対象の変数を定義しているっぽい…
nvmはNode Version Managerというツールでnodeのバージョンを管理するツールっぽいです。
これがnodebrewと競合しているっぽいのでnvmをアンインストールしていきたいと思います。

$ nvm help
...
Note:
  to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)
$ echo $NVM_DIR
/Users/hashito/.nvm

少し調べた所、フォルダを削除するとアンインストールされるっぽいです。
rm -rfは危険なコマンドなので削除する中身を確認して実行しましょう。

$rm -rf $NVM_DIR
rm: /Users/hashito/.nvm/versions/node/v10.16.3/lib/node_modules/n/LICENSE: Permission denied
rm: /Users/hashito/.nvm/versions/node/v10.16.3/lib/node_modules/n/bin: Permission denied
rm: /Users/hashito/.nvm/versions/node/v10.16.3/lib/node_modules/n/CHANGELOG.md: Permission denied
rm: /Users/hashito/.nvm/versions/node/v10.16.3/lib/node_modules/n/README.md: Permission denied
rm: /Users/hashito/.nvm/versions/node/v10.16.3/lib/node_modules/n/package.json: Permission denied
rm: /Users/hashito/.nvm/versions/node/v10.16.3/lib/node_modules/n: Directory not empty
rm: /Users/hashito/.nvm/versions/node/v10.16.3/lib/node_modules: Directory not empty
rm: /Users/hashito/.nvm/versions/node/v10.16.3/lib: Directory not empty
rm: /Users/hashito/.nvm/versions/node/v10.16.3: Directory not empty
rm: /Users/hashito/.nvm/versions/node: Directory not empty
rm: /Users/hashito/.nvm/versions: Directory not empty
rm: /Users/hashito/.nvm: Directory not empty

権限が足りないためsudoを追加して、実行します。

$ sudo rm -rf $NVM_DIR
Password:
$

$ node -v
v14.17.1
$ npm -v
7.19.1

削除後はnodebrewが有効になっているのがわかります。
気持ち悪いので~/.bashrc内のsource ~/.nvm/nvm.shも削除しておきます。

この状態でもう一度、ng newを実行してみます。

$ ng new p
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE p/README.md (1047 bytes)
CREATE p/.editorconfig (274 bytes)
CREATE p/.gitignore (604 bytes)
CREATE p/angular.json (3009 bytes)
CREATE p/package.json (1063 bytes)
CREATE p/tsconfig.json (783 bytes)
CREATE p/.browserslistrc (703 bytes)
CREATE p/karma.conf.js (1418 bytes)
CREATE p/tsconfig.app.json (287 bytes)
CREATE p/tsconfig.spec.json (333 bytes)
CREATE p/src/favicon.ico (948 bytes)
CREATE p/src/index.html (287 bytes)
CREATE p/src/main.ts (372 bytes)
CREATE p/src/polyfills.ts (2820 bytes)
CREATE p/src/styles.css (80 bytes)
CREATE p/src/test.ts (743 bytes)
CREATE p/src/assets/.gitkeep (0 bytes)
CREATE p/src/environments/environment.prod.ts (51 bytes)
CREATE p/src/environments/environment.ts (658 bytes)
CREATE p/src/app/app-routing.module.ts (245 bytes)
CREATE p/src/app/app.module.ts (393 bytes)
CREATE p/src/app/app.component.css (0 bytes)
CREATE p/src/app/app.component.html (24722 bytes)
CREATE p/src/app/app.component.spec.ts (1042 bytes)
CREATE p/src/app/app.component.ts (205 bytes)
⠇ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: p@0.0.0
npm ERR! Found: jasmine-core@3.7.1
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.7.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/hashito/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hashito/.npm/_logs/2021-07-13T22_15_01_861Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

node環境を戻した状態でキャッシュ削除

やはり失敗します。
もう一度、キャッシュの削除とnpmの更新を行います。

$ sudo npm cache verify  
Password:
Cache verified and compressed (~/.npm/_cacache)
Content verified: 31 (15334501 bytes)
Index entries: 31
Finished in 0.163s
$ sudo npm cache clear --force 
npm WARN using --force Recommended protections disabled.
$ sudo npm i -g npm

changed 14 packages, and audited 257 packages in 3s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

この状態でも失敗します。

nodeバージョンを最新にしてみる

こちらのCommentで、nodeのバージョンに関わる問題があると記載があります。
https://stackoverflow.com/a/67451478/12902006
npmも最新に更新しているので、nodeも最新に上げたいと思います。

$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
....
v16.0.0   v16.1.0   v16.2.0   v16.3.0   v16.4.0   v16.4.1   v16.4.2   
$ sudo nodebrew install-binary v16.4.2   
$ nodebrew use v16.4.2   
Password:
Fetching: https://nodejs.org/dist/v16.4.2/node-v16.4.2-darwin-x64.tar.gz
########################################################################################## 100.0%
Installed successfully
$ nodebrew use v16.4.2
use v16.4.2
$ node -v
v16.4.2

これで、最新に更新する事ができました。

$ ng new p
-bash: /Users/hashito/.nodebrew/current/bin/ng: No such file or directory

nodeバージョンを変更した所、ngコマンドが消失したため、再度インストールを行います。

$ sudo npm install -g @angular/cli
Password:
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 235 packages, and audited 236 packages in 9s

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ ng new p
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE p/README.md (1047 bytes)
CREATE p/.editorconfig (274 bytes)
CREATE p/.gitignore (604 bytes)
CREATE p/angular.json (3009 bytes)
CREATE p/package.json (1063 bytes)
CREATE p/tsconfig.json (783 bytes)
CREATE p/.browserslistrc (703 bytes)
CREATE p/karma.conf.js (1418 bytes)
CREATE p/tsconfig.app.json (287 bytes)
CREATE p/tsconfig.spec.json (333 bytes)
CREATE p/src/favicon.ico (948 bytes)
CREATE p/src/index.html (287 bytes)
CREATE p/src/main.ts (372 bytes)
CREATE p/src/polyfills.ts (2820 bytes)
CREATE p/src/styles.css (80 bytes)
CREATE p/src/test.ts (743 bytes)
CREATE p/src/assets/.gitkeep (0 bytes)
CREATE p/src/environments/environment.prod.ts (51 bytes)
CREATE p/src/environments/environment.ts (658 bytes)
CREATE p/src/app/app-routing.module.ts (245 bytes)
CREATE p/src/app/app.module.ts (393 bytes)
CREATE p/src/app/app.component.css (0 bytes)
CREATE p/src/app/app.component.html (24722 bytes)
CREATE p/src/app/app.component.spec.ts (1042 bytes)
CREATE p/src/app/app.component.ts (205 bytes)
⠼ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: p@0.0.0
npm ERR! Found: jasmine-core@3.7.1
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.7.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/hashito/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hashito/.npm/_logs/2021-07-13T22_35_00_160Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

心が・・・折れる。

nodeバージョンを14.16.1にしてみる

Commentにあったバージョンに合わせてみましょう。
node バージョンを14.16.1にしてみます。
https://stackoverflow.com/a/67451478/12902006

$ sudo nodebrew install-binary v14.16.1
Fetching: https://nodejs.org/dist/v14.16.1/node-v14.16.1-darwin-x64.tar.gz
########################################################################################## 100.0%
Installed successfully
$ node -v
v16.4.2
$ nodebrew use v14.16.1
use v14.16.1
$ node -v
v14.16.1
$ sudo npm install -g @angular/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
/Users/hashito/.nodebrew/node/v14.16.1/bin/ng -> /Users/hashito/.nodebrew/node/v14.16.1/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@12.1.1 postinstall /Users/hashito/.nodebrew/node/v14.16.1/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js

+ @angular/cli@12.1.1
added 235 packages from 180 contributors in 14.723s
$ ng new p
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
✔ Packages installed successfully.
    Successfully initialized git.
Nothing to be done.
$

Nothing to be done.！！！

問題は全てクリアになりました。

結論

ng newで失敗する場合nodeバージョンに問題がある場合があります。
nodeバージョンを変更して試しましょう。
あと、nodeバージョンを管理するツールは複数入れないこと！！

追記

このあたりにも別の回答がありました。
1)npmをV6に下げる。
2)インストールをスキップして、package.jsonのjasmine-coreを3.8に変更する。

https://stackoverflow.com/questions/62910471/why-ng-new-newapp-producing-unable-to-resolve-dependency-tree-error

追記の追記

ngのバージョンを最新に上げると回避できます。

Angular CLI: 12.1.2

Discussion