【Angular】ng newでPackage install failed, see above.のエラー解消

2023 10/28

2022年6月6日 2023年10月28日

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Angularの公式ドキュメントを見ながら、Angularのアプリを作成するときに、ng new プロジェクト名を実行したらPackage install failed, see above.とエラーが発生。

解決までの流れとしては、

nodeとnpmのバージョンがマッチしているか調べた。参照：Node.jsリリース一覧
→node -vを実行し、nodeのバージョンは16.13.0。npm -vを実行し、npmのバージョンは8.1.0であり、マッチしていることが確認できた。
npmのキャッシュが関係しているみたいなので、npm cache clean -fを実行して再度ng newを実行して解決。

まずは失敗したやつ

angular_projects % ng new sandbox
? Would you like to enable autocompletion? This will set up your terminal so 
pressing TAB while typing Angular CLI commands will show possible options and 
autocomplete arguments. (Enabling autocompletion will modify configuration files
 in your home directory.) Yes

    source <(ng completion script)
? Would you like to share anonymous usage data about this project with the 
Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy. For
 more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics disable --global

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE sandbox/README.md (1061 bytes)
CREATE sandbox/.editorconfig (274 bytes)
CREATE sandbox/.gitignore (548 bytes)
CREATE sandbox/angular.json (3014 bytes)
CREATE sandbox/package.json (1038 bytes)
CREATE sandbox/tsconfig.json (863 bytes)
CREATE sandbox/.browserslistrc (600 bytes)
CREATE sandbox/karma.conf.js (1424 bytes)
CREATE sandbox/tsconfig.app.json (287 bytes)
CREATE sandbox/tsconfig.spec.json (333 bytes)
CREATE sandbox/.vscode/extensions.json (130 bytes)
CREATE sandbox/.vscode/launch.json (474 bytes)
CREATE sandbox/.vscode/tasks.json (938 bytes)
CREATE sandbox/src/favicon.ico (948 bytes)
CREATE sandbox/src/index.html (293 bytes)
CREATE sandbox/src/main.ts (372 bytes)
CREATE sandbox/src/polyfills.ts (2338 bytes)
CREATE sandbox/src/styles.css (80 bytes)
CREATE sandbox/src/test.ts (749 bytes)
CREATE sandbox/src/assets/.gitkeep (0 bytes)
CREATE sandbox/src/environments/environment.prod.ts (51 bytes)
CREATE sandbox/src/environments/environment.ts (658 bytes)
CREATE sandbox/src/app/app-routing.module.ts (245 bytes)
CREATE sandbox/src/app/app.module.ts (393 bytes)
CREATE sandbox/src/app/app.component.css (0 bytes)
CREATE sandbox/src/app/app.component.html (23364 bytes)
CREATE sandbox/src/app/app.component.spec.ts (1076 bytes)
CREATE sandbox/src/app/app.component.ts (211 bytes)
⠼ Installing packages (npm)...npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/connect: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network 
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/.npm/_logs/2022-06-04T08_35_50_402Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

nodeやnpm、angularのバージョンを調べたやつ

angular_projects % ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.0.0
Node: 16.13.0
Package Manager: npm 8.1.0 
OS: darwin x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1400.0 (cli-only)
@angular-devkit/core         14.0.0 (cli-only)
@angular-devkit/schematics   14.0.0 (cli-only)
@schematics/angular          14.0.0 (cli-only)

npmのキャッシュを削除

angular_projects % npm cache clean -f

再度、ng newを実行してアプリを作成し、成功したやつ

angular_projects % ng new sandbox    
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE sandbox/README.md (1061 bytes)
CREATE sandbox/.editorconfig (274 bytes)
CREATE sandbox/.gitignore (548 bytes)
CREATE sandbox/angular.json (3014 bytes)
CREATE sandbox/package.json (1038 bytes)
CREATE sandbox/tsconfig.json (863 bytes)
CREATE sandbox/.browserslistrc (600 bytes)
CREATE sandbox/karma.conf.js (1424 bytes)
CREATE sandbox/tsconfig.app.json (287 bytes)
CREATE sandbox/tsconfig.spec.json (333 bytes)
CREATE sandbox/.vscode/extensions.json (130 bytes)
CREATE sandbox/.vscode/launch.json (474 bytes)
CREATE sandbox/.vscode/tasks.json (938 bytes)
CREATE sandbox/src/favicon.ico (948 bytes)
CREATE sandbox/src/index.html (293 bytes)
CREATE sandbox/src/main.ts (372 bytes)
CREATE sandbox/src/polyfills.ts (2338 bytes)
CREATE sandbox/src/styles.css (80 bytes)
CREATE sandbox/src/test.ts (749 bytes)
CREATE sandbox/src/assets/.gitkeep (0 bytes)
CREATE sandbox/src/environments/environment.prod.ts (51 bytes)
CREATE sandbox/src/environments/environment.ts (658 bytes)
CREATE sandbox/src/app/app.module.ts (314 bytes)
CREATE sandbox/src/app/app.component.css (0 bytes)
CREATE sandbox/src/app/app.component.html (23332 bytes)
CREATE sandbox/src/app/app.component.spec.ts (959 bytes)
CREATE sandbox/src/app/app.component.ts (211 bytes)
✔ Packages installed successfully.
    Directory is already under version control. Skipping initialization of git.

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい