Angular CLI cannot be installed on a Mac computer

Question

I'm using a Mac computer which is currently running macOS Ventura 13.1

I successfully installed node (v18.12.1) & npm (8.19.2) on the computer but when I try to run npm install -g @angular/cli to install Angular CLI, it gave me the following error.

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/@angular
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@angular'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@angular'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/@angular'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

Also, I tried the command with sudo, like sudo npm install -g @angular/cli , and then it gave me the following error.

npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

I tried installing Angular CLI using homebrew and nvm, but neither of them succeeded.

Answer 1

Finally, I could solve the issue. Here's what I did,

I used homebrew to install Angular CLI via brew install angular-cli. Then when I check ng version, it showed my current node version (v19) doesn't support for Angular. Then I used Node Version Manager (NVM) to downgrade my node version. I used the below command to install NVM on my Mac (macOS Ventura 13.1).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

This command automatically updated my .zshrc file as well. If it doesn't automatically updated for you, open the .zshrc file using open -t .zshrc command and add the following code to it.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

You can check nvm version using nvm -v command. After that I ran nvm install 18.12.1 command to downgrade the node version to 18.12.1.

You can run node -v command to verify.

Then I ran ng version command and got the following output.

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

Angular CLI: 15.0.4
Node: 18.12.1
Package Manager: npm 8.19.2
OS: darwin x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1500.4 (cli-only)
@angular-devkit/core         15.0.4 (cli-only)
@angular-devkit/schematics   15.0.4 (cli-only)
@schematics/angular          15.0.4 (cli-only)

Then I created my first angular app using ng new my_first_app command. It gave me the following error.

⠦ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/core@undefined
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^15.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"15.0.4" from @angular/[email protected]
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"^15.0.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! 

✖ Package install failed, see above.
The Schematic workflow failed. See above.

Then I navigated to the project directory and I couldn't see both node_modules directory and package-lock.json file. Then I tried running the ng serve command and it gave me an error and asked me to run npm install command. When I run npm install command, it didn't work successfully and still I couldn't see node_modules directory and package-lock.json file inside the angular project.

Finally, I ran the npm install --legacy-peer-deps command and it wasn't successful either. Then I ran sudo npm install --legacy-peer-deps command and finally it solved the problem.

Then I ran the ng serve command and I could get it compiled successfully and see the output on the browser.

Hope this answer will help you when you try to install Angular CLI on macOS Ventura 13.1

Answer 2

On my macOS Ventura 13.1 using sudo has solved the issue: sudo ng new my-app

Answer 3

Using "sudo npm install -g @angular/cli"

solved the issue.