Angular CLI安装的注意事项

确保 Node.js 环境合适

在安装 Angular CLI 之前，首先要保证系统中安装了合适版本的 Node.js。Angular CLI 是基于 Node.js 运行的，Node.js 提供了运行 Angular CLI 所需的 JavaScript 运行环境。

不同版本的 Angular CLI 对 Node.js 版本有不同的要求。例如，Angular CLI 12.x 版本要求 Node.js 14.15.1 或更高版本，但低于 17.0.0。你可以通过官方 Angular 文档来确定你计划安装的 Angular CLI 版本对应的 Node.js 版本要求。

查看 Node.js 版本

在命令行中输入以下命令来查看当前安装的 Node.js 版本：

node -v

如果显示的版本不符合要求，就需要进行版本升级或降级。

升级 Node.js

如果当前 Node.js 版本低于要求版本，可以通过 Node.js 官方安装包进行升级。访问 Node.js 官方网站，下载适合你操作系统的最新长期支持（LTS）版本安装包，然后按照安装向导进行安装。安装完成后，再次通过 node -v 命令检查版本是否更新成功。

降级 Node.js

有时候，你可能安装了高于 Angular CLI 要求的 Node.js 版本，此时可能需要降级。一种常用的方法是使用 nvm（Node Version Manager）。nvm 允许你在同一系统上轻松切换不同版本的 Node.js。

安装 nvm：
- 在 Linux 或 macOS 系统上，可以使用以下命令安装 nvm：

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

安装完成后，关闭当前终端并重新打开，使 nvm 生效。 - 在 Windows 系统上，可以从 nvm-windows 官方仓库下载安装包，然后按照安装向导进行安装。

使用 nvm 安装指定版本 Node.js：例如，要安装 Node.js 14.17.0 版本，可以使用以下命令：

nvm install 14.17.0

安装完成后，可以通过以下命令切换到该版本：

nvm use 14.17.0

再次通过 node -v 命令检查版本是否切换成功。

安装 npm 并确保其版本合适

npm（Node Package Manager）是 Node.js 的包管理器，Angular CLI 作为一个 npm 包，需要通过 npm 进行安装。npm 随 Node.js 一起安装，但有时需要更新到合适的版本。

查看 npm 版本

在命令行中输入以下命令来查看当前安装的 npm 版本：

npm -v

更新 npm

可以使用以下命令将 npm 更新到最新版本：

npm install -g npm

-g 参数表示全局安装，这样在系统的任何位置都可以使用更新后的 npm。

以管理员身份运行安装命令（可选）

在某些操作系统（如 Windows 和 macOS）上，安装 Angular CLI 可能需要管理员权限。如果普通用户安装时遇到权限不足的错误，可以尝试以管理员身份运行安装命令。

在 Windows 上以管理员身份运行

打开“开始”菜单，搜索“命令提示符”。
右键单击“命令提示符”，选择“以管理员身份运行”。
在打开的管理员命令提示符窗口中，输入安装 Angular CLI 的命令。

在 macOS 上以管理员身份运行

打开“终端”应用。
在终端中输入 sudo 加上安装 Angular CLI 的命令，例如：

sudo npm install -g @angular/cli

输入密码后，系统会以管理员权限执行该安装命令。

需要注意的是，以管理员身份运行命令存在一定的安全风险，因为它赋予了命令对系统文件和设置的更高访问权限。只有在确实需要时才使用这种方法。

安装过程中的网络问题

安装 Angular CLI 时，npm 需要从 npm 官方仓库下载相关的包和依赖项。因此，网络连接的稳定性和速度对安装过程至关重要。

网络不稳定或速度慢

如果网络不稳定或速度慢，安装过程可能会中断或花费很长时间。你可以尝试以下方法解决：

切换网络：如果可能，切换到其他网络，例如从 Wi-Fi 切换到有线网络，或者从移动网络切换到 Wi-Fi。
使用代理：如果你的网络环境需要通过代理服务器访问互联网，可以在 npm 中配置代理。在命令行中输入以下命令来配置代理：

npm config set proxy http://proxy-server:port
npm config set https-proxy http://proxy-server:port

将 proxy-server 替换为实际的代理服务器地址，port 替换为代理服务器的端口号。如果代理服务器需要认证，可以使用以下命令：

npm config set proxy http://username:password@proxy-server:port
npm config set https-proxy http://username:password@proxy-server:port

将 username 和 password 替换为实际的代理认证用户名和密码。

安装完成后，如果不再需要代理，可以使用以下命令取消代理配置：

npm config delete proxy
npm config delete https-proxy

网络连接被阻止

在某些企业网络环境中，网络策略可能会阻止 npm 访问官方仓库。此时，你可以尝试联系网络管理员，请求允许 npm 相关的网络访问。或者，你可以使用企业内部搭建的 npm 镜像仓库。

使用 npm 镜像源

npm 官方仓库位于国外，在一些网络环境下访问速度可能较慢。为了提高下载速度，可以使用 npm 镜像源。常用的 npm 镜像源有淘宝镜像源（https://registry.npmmirror.com/）。

临时使用镜像源

可以在安装 Angular CLI 时临时指定镜像源，例如：

npm install -g @angular/cli --registry=https://registry.npmmirror.com

这样，npm 会从淘宝镜像源下载相关的包和依赖项。

永久设置镜像源

如果希望以后所有的 npm 操作都使用镜像源，可以使用以下命令永久设置：

npm config set registry https://registry.npmmirror.com

设置完成后，可以通过以下命令检查是否设置成功：

npm config get registry

如果输出为 https://registry.npmmirror.com，则表示设置成功。

需要注意的是，使用镜像源可能会存在一定的延迟，因为镜像源需要同步官方仓库的内容。如果在安装过程中遇到问题，可以尝试切换回官方源进行安装。

安装路径和环境变量

安装 Angular CLI 时，需要注意安装路径和环境变量的设置。

安装路径

默认情况下，npm 会将全局安装的包（如 Angular CLI）安装到 Node.js 的安装目录下的 node_modules 文件夹中。在 Windows 系统上，通常路径为 C:\Program Files\nodejs\node_modules；在 macOS 和 Linux 系统上，通常路径为 /usr/local/lib/node_modules。

如果希望将 Angular CLI 安装到其他路径，可以通过设置 npm 的 prefix 配置项来指定。例如，要将 Angular CLI 安装到 D:\my-angular-cli 目录下，可以使用以下命令：

npm config set prefix "D:\my-angular-cli"
npm install -g @angular/cli

这样，Angular CLI 及其相关依赖项会被安装到指定目录。

环境变量

安装完成后，需要确保安装路径被添加到系统的环境变量中，这样才能在任意目录下通过命令行使用 Angular CLI。

在 Windows 上设置环境变量：
- 打开“系统属性”对话框。可以通过在“开始”菜单中搜索“系统属性”来找到它。
- 在“系统属性”对话框中，切换到“高级”选项卡，点击“环境变量”按钮。
- 在“环境变量”对话框中，找到“系统变量”下的“Path”变量，点击“编辑”。
- 在“编辑环境变量”对话框中，点击“新建”，然后输入 Angular CLI 的安装路径（例如 D:\my-angular-cli\bin）。
- 依次点击“确定”关闭所有对话框。
在 macOS 和 Linux 上设置环境变量：
- 打开终端，编辑 .bashrc 文件（如果使用的是 zsh shell，则编辑 .zshrc 文件）。可以使用以下命令编辑：

nano ~/.bashrc

- 在文件末尾添加以下内容，将 `path/to/your/angular/cli/bin` 替换为实际的 Angular CLI 安装路径下的 `bin` 目录：

export PATH="path/to/your/angular/cli/bin:$PATH"

- 保存并退出文件。在 nano 编辑器中，可以按 `Ctrl + X`，然后按 `Y`，最后按 `Enter` 来保存并退出。
- 使修改后的环境变量生效，可以使用以下命令：

source ~/.bashrc

安装过程中的依赖冲突

在安装 Angular CLI 时，可能会遇到依赖冲突的问题。这是因为 Angular CLI 及其依赖的包可能对某些其他包有特定的版本要求，而系统中已安装的相关包版本不符合要求。

查看依赖冲突信息

当安装过程中出现依赖冲突时，npm 会在命令行输出相关的冲突信息。例如，可能会显示类似以下的信息：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: @angular/cli@12.2.10
npm ERR! Found: @angular/core@13.3.10
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^13.3.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^12.2.0" from @angular/cli@12.2.10
npm ERR! node_modules/@angular/cli
npm ERR!   @angular/cli@"*" from the root project

上述信息表明 @angular/cli@12.2.10 要求 @angular/core@^12.2.0，但系统中已安装的是 @angular/core@13.3.10，这就导致了依赖冲突。

解决依赖冲突的方法

升级或降级依赖包：根据依赖冲突信息，确定需要升级或降级的包。例如，在上述例子中，可以尝试降级 @angular/core 到符合 @angular/cli@12.2.10 要求的版本。可以使用以下命令降级：

npm install @angular/core@12.2.10

使用 npm-force-resolutions：这是一个 npm 插件，可以强制 npm 使用特定版本的包，即使存在依赖冲突。首先安装该插件：

npm install -g npm-force-resolutions

然后在项目的 package.json 文件中添加 resolutions 字段。例如，对于上述依赖冲突，可以在 package.json 中添加以下内容：

{
  "name": "my-project",
  "version": "1.0.0",
  "resolutions": {
    "@angular/core": "12.2.10"
  },
  "dependencies": {
    "@angular/cli": "^12.2.10",
    "@angular/core": "^13.3.0"
  }
}

添加完成后，再次运行安装命令 npm install，npm 会按照 resolutions 中指定的版本安装 @angular/core。

需要注意的是，使用 npm-force-resolutions 可能会带来一些潜在问题，因为它强制使用特定版本的包，可能会破坏其他包的正常功能。在使用前，请确保你了解其影响，并在必要时进行充分的测试。

安装完成后的验证

安装完成后，需要验证 Angular CLI 是否安装成功。

检查 Angular CLI 版本

在命令行中输入以下命令来查看安装的 Angular CLI 版本：

ng --version

如果安装成功，会输出类似以下的信息：

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

Angular: 
...

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.10
@angular-devkit/build-angular   12.2.10
@angular-devkit/core            12.2.10
@angular-devkit/schematics      12.2.10
@angular/cli                    12.2.10
@schematics/angular             12.2.10
rxjs                            6.6.7
typescript                      4.3.5

上述信息显示了 Angular CLI 的版本以及相关依赖包的版本。

创建并运行一个简单的 Angular 项目

可以通过创建并运行一个简单的 Angular 项目来进一步验证 Angular CLI 是否正常工作。在命令行中输入以下命令创建一个新的 Angular 项目：

ng new my-first-angular-app

my-first-angular-app 是项目名称，可以根据需要修改。创建过程中，会提示你选择一些配置选项，例如是否使用路由、选择 CSS 预处理器等。可以根据自己的需求进行选择。

创建完成后，进入项目目录：

cd my-first-angular-app

然后运行项目：

ng serve

运行成功后，在浏览器中访问 http://localhost:4200，如果看到一个默认的 Angular 应用页面，则说明 Angular CLI 安装和配置都成功。

常见安装错误及解决方法

权限错误：
- 错误信息：在 Windows 上可能出现类似于 “npm ERR! code EACCES” 的错误，在 macOS 和 Linux 上可能出现 “Permission denied” 错误。
- 原因：这通常是由于没有足够的权限来安装全局包。
- 解决方法：如前文所述，在 Windows 上以管理员身份运行命令提示符，在 macOS 和 Linux 上使用 sudo 命令来安装 Angular CLI。
找不到命令错误：
- 错误信息：输入 ng 命令时，提示 “'ng' 不是内部或外部命令，也不是可运行的程序或批处理文件”（Windows）或 “command not found: ng”（macOS 和 Linux）。
- 原因：可能是安装路径没有正确添加到环境变量中。
- 解决方法：按照前文所述的方法，检查并正确设置系统的环境变量，确保 Angular CLI 的安装路径被包含在 PATH 变量中。
安装过程中下载失败错误：
- 错误信息：npm 安装过程中出现类似于 “npm ERR! network request to https://registry.npmjs.org/@angular%2fcli failed, reason: connect ETIMEDOUT” 的错误。
- 原因：网络连接问题，可能是网络不稳定或网络被阻止。
- 解决方法：检查网络连接，尝试切换网络或使用代理。可以按照前文所述的方法配置 npm 代理，或者使用 npm 镜像源来提高下载速度。
依赖包版本不兼容错误：
- 错误信息：如前文提到的 “npm ERR! ERESOLVE unable to resolve dependency tree” 错误。
- 原因：Angular CLI 及其依赖的包对某些其他包的版本要求不一致。
- 解决方法：按照前文所述的解决依赖冲突的方法，升级或降级相关依赖包，或者使用 npm-force-resolutions 插件来强制使用特定版本的包。

通过注意以上各个方面，你应该能够顺利安装 Angular CLI，并在前端开发中使用它来创建和管理 Angular 项目。在安装过程中，如果遇到其他未提及的错误，可以通过搜索引擎查找相关解决方案，或者在 Angular 官方社区寻求帮助。