Angular CLI安装常见问题及解决

一、Angular CLI 安装基础

Angular CLI 是 Angular 开发中极为重要的工具，它能极大地简化项目的创建、开发和部署流程。在开始安装 Angular CLI 之前，确保你的系统满足以下基本要求：

Node.js 环境：Angular CLI 依赖于 Node.js，因此首先要在系统中安装 Node.js。你可以从 Node.js 官方网站（https://nodejs.org/）下载适合你操作系统的安装包进行安装。安装完成后，在命令行中输入 node -v 和 npm -v 来检查 Node.js 和 npm（Node 包管理器）是否安装成功，并且确认其版本是否满足 Angular CLI 的要求。通常建议使用较新的 LTS（长期支持）版本。例如，在撰写本文时，Node.js v14.x 及以上版本是比较合适的。
npm 或 yarn：npm 是随 Node.js 一同安装的包管理器，当然你也可以选择使用 yarn。yarn 有着更快的安装速度和更好的依赖管理功能。如果选择使用 yarn，可通过 npm install -g yarn 命令进行全局安装。安装完成后，通过 yarn -v 检查安装是否成功。

二、Angular CLI 安装步骤

使用 npm 安装：在满足上述环境要求后，在命令行中执行以下命令来全局安装 Angular CLI：

npm install -g @angular/cli

这个命令会从 npm 仓库下载 Angular CLI 及其所有依赖，并将其安装到全局环境中，这样在系统的任何目录下都可以使用 ng 命令来调用 Angular CLI。

使用 yarn 安装：如果选择使用 yarn，执行以下命令：

yarn global add @angular/cli

yarn 会自动处理依赖并将 Angular CLI 安装到全局。

三、安装过程中常见问题及解决方法

网络问题
- 问题描述：在安装过程中，可能会因为网络不稳定或被墙等原因导致安装失败，出现诸如 npm ERR! code ECONNRESET 或 npm ERR! network socket hang up 等错误信息。
- 解决方法：
  - 更换 npm 源：npm 默认从国外的官方源下载包，在国内网络环境下可能速度较慢或不稳定。可以通过以下命令将 npm 源更换为国内的镜像源，如淘宝镜像源：

npm config set registry https://registry.npm.taobao.org

更换源后，再次执行安装命令。若要恢复到官方源，可执行 npm config set registry https://registry.npmjs.org。 - 使用 yarn：yarn 在处理网络问题上有时会表现得更好。如果 npm 安装失败，可以尝试使用 yarn 进行安装，如前文所述执行 yarn global add @angular/cli 命令。 - 使用代理：如果网络环境需要使用代理，可以设置 npm 的代理。假设代理服务器地址为 proxy.example.com，端口为 8080，执行以下命令：

npm config set proxy http://proxy.example.com:8080
npm config set https-proxy http://proxy.example.com:8080

安装完成后，若不再需要代理，可通过以下命令取消设置：

npm config delete proxy
npm config delete https-proxy

对于 yarn，设置代理的方式略有不同。假设同样的代理服务器和端口，执行：

yarn config set proxy http://proxy.example.com:8080
yarn config set https-proxy http://proxy.example.com:8080

取消代理设置：

yarn config delete proxy
yarn config delete https-proxy

权限问题
- 问题描述：在某些操作系统（如 Linux 或 macOS）中，全局安装 Angular CLI 可能会因为权限不足而失败，出现 EACCES 错误。例如，在执行 npm install -g @angular/cli 时，提示类似于 npm ERR! path /usr/local/lib/node_modules/@angular/cli/node_modules/ansi-regex/package.json npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access 等错误信息。
- 解决方法：
  - 使用 sudo 权限：对于 Linux 和 macOS 系统，可以在安装命令前加上 sudo 来获取管理员权限。例如：

sudo npm install -g @angular/cli

不过，频繁使用 sudo 安装 npm 包可能会带来一些安全风险，因为 sudo 赋予了命令超级用户权限，可能会导致系统文件被误修改。 - 修改 npm 全局安装路径权限：一种更安全的方法是修改 npm 全局安装路径的权限，使其当前用户具有写入权限。首先，确定 npm 的全局安装路径，执行 npm config get prefix，一般默认路径为 /usr/local。然后，修改该路径的权限，假设 npm 全局安装路径为 /usr/local：

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

这样当前用户就对 npm 全局安装路径有了读写权限，之后可以在不使用 sudo 的情况下安装 Angular CLI。 - 使用 nvm（Node Version Manager）：nvm 可以帮助你在同一系统中管理多个 Node.js 版本，并且在安装 npm 包时可以避免权限问题。首先安装 nvm，例如在 Linux 或 macOS 系统中，可以通过以下命令安装：

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

安装完成后，重新打开终端，使用 nvm 安装指定版本的 Node.js，如：

nvm install 14.17.0
nvm use 14.17.0

然后再执行 npm install -g @angular/cli，此时安装会在 nvm 管理的 Node.js 环境下进行，避免了全局权限问题。

版本兼容性问题
- 问题描述：Angular CLI 有不同的版本，不同版本可能对 Node.js、npm 以及 Angular 框架本身有不同的版本要求。如果安装的版本不兼容，可能会导致各种奇怪的错误，比如在创建项目时提示 The local Angular CLI version is older than the latest stable version. 或者在运行项目时出现 Uncaught Error: No provider for [some service] 等错误，这些错误看似与 CLI 安装无关，但实际上可能是因为版本不兼容引起的。
- 解决方法：
  - 查看版本兼容性表：在 Angular 官方文档中，有专门的版本兼容性表格，列出了 Angular CLI、Angular 框架、Node.js 和 npm 之间的推荐版本组合。例如，Angular CLI v12 推荐搭配 Node.js v14.x 及以上版本，npm v6.14.x 及以上版本。在安装之前，务必查看该表格，确保所安装的版本相互兼容。
  - 升级或降级 Angular CLI：如果已经安装了不兼容的版本，可以考虑升级或降级 Angular CLI。升级 Angular CLI 可以使用以下命令：

npm install -g @angular/cli@latest

如果要降级到特定版本，假设要降级到 v12.2.10，执行：

npm install -g @angular/cli@12.2.10

同样，对于 yarn，升级命令为 yarn global upgrade @angular/cli，降级命令为 yarn global add @angular/cli@12.2.10。 - 升级或降级 Node.js 和 npm：有时需要根据 Angular CLI 的版本要求升级或降级 Node.js 和 npm。对于 Node.js，可以使用 nvm 进行版本切换。例如，要切换到 v14.17.0，执行 nvm install 14.17.0 nvm use 14.17.0。npm 的升级可以通过 npm install -g npm 命令进行。如果要降级 npm，可能需要手动下载指定版本的 npm 安装包进行安装，具体方法可参考 npm 官方文档。

依赖安装问题
- 问题描述：Angular CLI 有众多依赖项，在安装过程中可能会出现某些依赖安装失败的情况。例如，安装过程中提示 npm ERR! missing: [package name], required by [another package name]，这表明某个依赖包没有成功安装，可能会影响 Angular CLI 的正常使用。
- 解决方法：
  - 单独安装缺失依赖：根据错误提示，找到缺失的依赖包，尝试单独安装该依赖包。例如，如果提示 npm ERR! missing: @angular - common, required by @angular/cli，则执行 npm install -g @angular - common（注意：这里只是示例，实际安装可能不需要 -g 全局安装，具体根据情况而定）。安装完成后，再次尝试安装 Angular CLI。
  - 清理 npm 缓存并重新安装：npm 缓存有时可能会导致依赖安装问题。可以通过以下命令清理 npm 缓存：

npm cache clean --force

清理完成后，重新执行 npm install -g @angular/cli 命令。对于 yarn，清理缓存的命令是 yarn cache clean，然后重新执行 yarn global add @angular/cli。 - 检查依赖冲突：可能存在依赖冲突导致某些依赖无法正确安装。可以使用 npm ls 命令来查看已安装包的依赖树，查找是否存在版本冲突的情况。例如，如果两个不同的包依赖于同一个包的不同版本，可能会导致问题。解决依赖冲突可能需要调整相关包的版本，使其兼容。这可能需要一些调试和尝试，可参考相关包的文档来确定合适的版本。

操作系统特定问题
- Windows 系统
  - 问题描述：在 Windows 系统中安装 Angular CLI 时，可能会遇到诸如 ng 命令无法识别的问题，即使安装过程看似成功。这可能是因为系统环境变量没有正确配置。
  - 解决方法：确保 Node.js 的安装目录以及 npm 的全局安装目录（通常为 C:\Users\[你的用户名]\AppData\Roaming\npm）都添加到了系统的 PATH 环境变量中。打开系统属性 -> 高级 -> 环境变量，在 系统变量 中找到 PATH 变量，点击 编辑，添加上述目录路径。添加完成后，重新打开命令提示符，再次尝试使用 ng 命令。
- Linux 系统
  - 问题描述：在一些基于 Debian 或 Ubuntu 的 Linux 系统中，安装 Angular CLI 后运行 ng 命令可能会提示 command not found，尽管安装过程没有报错。这可能是因为系统中存在多个 Node.js 版本，导致路径混淆。
  - 解决方法：使用 which node 和 which npm 命令来确认当前使用的 Node.js 和 npm 路径是否正确。如果路径不正确，可以通过更新软链接或修改 PATH 环境变量来确保使用正确的 Node.js 和 npm 版本。例如，如果正确的 Node.js 安装路径为 /usr/local/nodejs/bin/node，可以通过以下命令更新软链接：

sudo ln -sf /usr/local/nodejs/bin/node /usr/bin/node
sudo ln -sf /usr/local/nodejs/bin/npm /usr/bin/npm

这样系统就会使用正确的 Node.js 和 npm 版本，再次尝试运行 ng 命令。 - macOS 系统 - 问题描述：在 macOS 系统中，安装 Angular CLI 后可能会遇到权限问题，即使按照前面提到的修改权限方法操作后，仍可能出现某些文件无法写入的情况。这可能与 macOS 的系统完整性保护（SIP）有关。 - 解决方法：如果确定是 SIP 导致的问题，可以在重启系统时按住 Command + R 进入恢复模式，在终端中执行 csrutil disable 命令关闭 SIP（注意：关闭 SIP 会降低系统安全性，操作需谨慎）。关闭 SIP 后，重新按照前面修改权限的方法操作，确保当前用户对相关目录有写入权限，然后再次安装 Angular CLI。如果安装成功后想重新开启 SIP，同样进入恢复模式，执行 csrutil enable 命令。

四、安装后的验证与测试

验证 Angular CLI 安装：安装完成后，在命令行中输入 ng --version。如果安装成功，会显示 Angular CLI 的版本信息，同时还会列出本地安装的 Angular 相关包的版本信息。例如：

Angular CLI: 13.2.1
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 
... animations, common, compiler, compiler - cli, core, forms
... platform - browser, platform - browser - dynamic, router
Ivy Workspace: 

Package                         Version
---------------------------------------------------------
@angular - cli                    13.2.1
@angular - common                 13.2.0
@angular - compiler               13.2.0
@angular - compiler - cli         13.2.0
@angular - core                   13.2.0
@angular - forms                  13.2.0
@angular - platform - browser       13.2.0
@angular - platform - browser - dynamic 13.2.0
@angular - router                 13.2.0
@angular - language - service       13.2.1
@schematics - angular             13.2.1
rxjs                            7.5.5
typescript                      4.5.5

创建并测试 Angular 项目：使用 Angular CLI 创建一个新的 Angular 项目来进一步验证安装是否成功。在命令行中执行以下命令创建一个名为 my - app 的新项目：

ng new my - app

这个过程中，Angular CLI 会询问一些关于项目的配置问题，如是否使用路由、选择 CSS 预处理器等。根据需要进行选择后，Angular CLI 会自动创建项目结构，并安装项目所需的依赖。创建完成后，进入项目目录：

cd my - app

然后启动项目：

ng serve --open

ng serve 命令会启动一个开发服务器，--open 参数会自动在浏览器中打开项目。如果浏览器中成功显示出默认的 Angular 欢迎页面，说明 Angular CLI 安装成功且项目能够正常运行。

五、总结常见问题及预防措施

网络问题：尽量使用稳定的网络环境，在国内可考虑使用国内镜像源。定期检查网络连接，若出现网络波动导致安装失败，及时重试或更换安装方式（如从 npm 切换到 yarn）。
权限问题：避免过度使用 sudo，优先采用修改权限或使用 nvm 等更安全的方式。在安装前了解系统的权限设置和最佳实践，确保安装过程顺利。
版本兼容性问题：安装前仔细查阅官方版本兼容性表，根据项目需求选择合适的 Angular CLI、Node.js 和 npm 版本。在项目开发过程中，如需升级或降级相关工具，先进行测试，确保不会引入兼容性问题。
依赖安装问题：定期清理 npm 或 yarn 缓存，安装过程中密切关注依赖安装的错误提示，及时处理缺失或冲突的依赖。在项目开发过程中，合理管理依赖，避免引入不必要的版本冲突。
操作系统特定问题：了解不同操作系统关于环境变量配置、权限管理和系统保护机制的特点。在安装前熟悉相关操作系统的操作手册，确保安装过程符合操作系统的规范。

通过以上对 Angular CLI 安装常见问题及解决方法的详细介绍，希望能帮助开发者顺利安装 Angular CLI，为 Angular 项目的开发打下坚实基础。在实际安装和开发过程中，遇到问题不要慌张，仔细分析错误信息，按照上述方法逐步排查解决。