MacOS下Angular CLI安装后出现Angular未定义及Ivy工作区错误的正确安装方案咨询

Hey there, let's walk through resolving this Angular CLI install problem step by step. The root issue here is almost certainly permission conflicts from using sudo to install global npm packages—this messes up npm's default directory structure and leads to those "undefined" and Ivy workspace errors. Here's how to fix it properly:

Step 1: Clean Up Sudo-Installed Residues #

First, we need to remove the broken Angular CLI installation and clear any cached data:

• Uninstall the global Angular CLI that you installed with sudo:

  sudo npm uninstall -g @angular/cli
  

• Force-clear npm's cache to eliminate corrupted files:

  npm cache clean --force
  

• Check if there's a leftover ng command lingering in your system path, and delete it if found:

  which ng
  # If this outputs a path like /usr/local/bin/ng, run:
  sudo rm -rf /usr/local/bin/ng
  

Step 2: Fix npm Global Installation Permissions (No More Sudo!) #

The core problem is that macOS assigns root-level permissions to npm's default global directory, so regular users can't write to it without sudo. Instead of using sudo, we'll configure npm to use a user-owned directory for global packages:

1. Create a dedicated global npm directory in your user folder:

   mkdir -p ~/.npm-global
   

2. Tell npm to use this directory as its global prefix:

   npm config set prefix '~/.npm-global'
   

3. Add this directory to your shell's PATH so your system can find global npm commands like ng:
   • If you use Zsh (default on macOS Catalina and later), open your shell config file:

     open ~/.zshrc
     

   • If you use Bash, open ~/.bash_profile instead:

     open ~/.bash_profile
     

   • Add this line to the bottom of the file, save it, and close the editor:

     export PATH=~/.npm-global/bin:$PATH
     

4. Apply the changes immediately to your current shell session:

   source ~/.zshrc # For Zsh
   # OR
   source ~/.bash_profile # For Bash
   

5. Verify the configuration worked by checking npm's prefix:

   npm config get prefix
   # This should output /Users/[your-username]/.npm-global
   

Step 3: Reinstall Angular CLI (Without Sudo!) #

Now that your npm permissions are fixed, install Angular CLI globally normally:

npm install -g @angular/cli

Verify the installation succeeded by running:

ng version

This should display the Angular CLI version, Node.js version, and other details without any "undefined" or Ivy workspace errors.

Extra Troubleshooting: Node.js Version Compatibility #

If you still see Ivy-related errors, double-check that your Node.js version is compatible with the Angular CLI version you're installing. For example:

• Angular CLI 16+ requires Node.js 16.14.0 or later
• Angular CLI 17+ requires Node.js 18.13.0 or later

If your Node.js version is outdated, use nvm (Node Version Manager) to install a compatible version:

1. Install nvm:

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

2. Restart your terminal, then install a compatible Node.js version (e.g., 18 LTS):

   nvm install 18
   nvm use 18
   

3. Reinstall Angular CLI again if needed.

内容的提问来源于stack exchange，提问作者ElliotG