Angular入门启蒙03，Angular 环境搭建全解析：Node.js、npm 与 Angular CLI 安装配置
Angular 作为 Google 推出的前端框架，凭借其完整的生态、强类型支持和企业级开发特性，成为大型前端项目的首选之一。而搭建稳定、合规的 Angular 开发环境，是入门和进阶的第一步 —— 核心围绕 Node.js、npm（包管理工具）和 Angular CLI（脚手架工具）三大组件展开。本文将从环境准备、分步安装、配置优化到问题排查，全方位解析 Angular 环境搭建的全流程。
一、环境准备：明确版本兼容关系
Angular 对 Node.js 和 npm 的版本有严格要求，版本不匹配会直接导致 CLI 安装失败或项目运行异常，建议先确认兼容关系：
| Angular 版本 | 最低 Node.js 版本 | 最低 npm 版本 |
|---|---|---|
| Angular 17 | 18.13.0+ | 9.6.7+ |
| Angular 16 | 16.14.0+ | 8.19.2+ |
| Angular 15 | 14.20.0+ | 6.14.17+ |
小贴士：优先选择 LTS（长期支持版）Node.js，稳定性更高；可通过 Angular 官网版本兼容文档查询最新适配关系。
二、第一步：安装 Node.js 与 npm
Node.js 是 Angular 运行的基础（Angular CLI 依赖 Node.js 环境），npm（Node Package Manager）随 Node.js 自带，用于管理依赖包。
2.1 下载与安装 Node.js
方式 1：官方安装包（推荐新手）
- 访问Node.js 官网，下载对应系统（Windows/macOS/Linux）的 LTS 版本安装包；
- 运行安装包，按向导完成安装：
- Windows：勾选 “Add to PATH”（自动配置环境变量），其余默认即可；
- macOS：双击.pkg 文件，按提示安装；
Linux（以 Ubuntu 为例）：
# 下载并导入NodeSource GPG密钥 curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /usr/share/keyrings/nodesource.gpg # 添加Node.js 18.x LTS源 echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list # 更新并安装 sudo apt update && sudo apt install nodejs -y 方式 2：nvm（推荐多版本管理）
若需同时开发多个项目（不同 Angular 版本），建议用 nvm（Node Version Manager）管理 Node.js 版本：
- Windows：安装nvm-windows；
macOS/Linux：
# 安装nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # 刷新环境变量 source ~/.bashrc # 或 ~/.zshrc（根据终端类型） # 安装指定版本Node.js（如18.18.0） nvm install 18.18.0 # 设置默认版本 nvm alias default 18.18.0 2.2 验证安装与配置 npm 镜像（可选）
配置 npm 镜像（解决国内下载慢问题）：
# 临时使用淘宝镜像 npm install -g xxx --registry=https://registry.npmmirror.com # 永久配置淘宝镜像 npm config set registry https://registry.npmmirror.com # 验证镜像配置 npm config get registry 验证 Node.js 和 npm 是否安装成功：
# 查看Node.js版本 node -v # 查看npm版本 npm -v 若输出版本号，说明安装成功；若提示 “命令未找到”，需检查环境变量是否配置。
三、第二步：安装 Angular CLI
Angular CLI 是官方脚手架工具，可一键创建项目、启动开发服务器、构建生产包等，必须全局安装。
3.1 全局安装 Angular CLI
# 安装最新稳定版 npm install -g @angular/cli # 安装指定版本（如17.0.0） npm install -g @angular/[email protected] 注意：若 Windows 系统提示 “权限不足”，以管理员身份运行命令提示符；
macOS/Linux 若提示权限错误，可添加--unsafe-perm：
sudo npm install -g @angular/cli --unsafe-perm 3.2 验证 Angular CLI 安装
# 查看CLI版本 ng version # 或简写 ng v 若输出 Angular CLI 版本、Node.js 版本等信息，说明安装成功；若提示 “ng 不是内部或外部命令”，需检查 npm 全局包路径是否加入系统环境变量：
- Windows：npm 全局包路径默认是
C:\Users\你的用户名\AppData\Roaming\npm，需添加到系统 PATH； - macOS/Linux：默认路径是
/usr/local/bin，一般已加入环境变量。
3.3 升级 / 卸载 Angular CLI
# 卸载现有CLI npm uninstall -g @angular/cli # 清理缓存 npm cache clean --force # 重新安装最新版 npm install -g @angular/cli 四、第三步：验证环境 —— 创建第一个 Angular 项目
环境搭建完成后，通过创建并运行项目验证是否可用：
4.1 创建新项目
# 创建名为my-first-angular的项目（默认使用最新配置） ng new my-first-angular 执行命令后，CLI 会提示：
- 是否添加路由（
Would you like to add Angular routing?）：建议选Yes； - 选择样式预处理器（
Which stylesheet format would you like to use?）：新手选CSS即可。
等待依赖安装完成（首次安装可能较慢，耐心等待）。
4.2 启动开发服务器
# 进入项目目录 cd my-first-angular # 启动开发服务器（默认端口4200） ng serve # 启动并指定端口（避免端口冲突） ng serve --port 4201 # 启动后自动打开浏览器 ng serve --open 若终端输出 “** Angular Live Development Server is listening on localhost:4200 **”，且浏览器访问http://localhost:4200能看到 Angular 默认欢迎页，说明环境完全正常！
五、常见问题排查
问题 1：npm install 安装依赖慢 / 失败
解决方案：配置淘宝镜像（见 2.2 节），或使用 cnpm 替代 npm：
npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install -g @angular/cli 问题 2：ng serve 启动后页面空白 / 报错
- 检查 Node.js 版本是否与 Angular CLI 版本兼容；
清除项目依赖并重新安装：
rm -rf node_modules package-lock.json # Windows：rd /s /q node_modules && del package-lock.json npm install 问题 3：权限不足（macOS/Linux）
避免使用 sudo 安装全局包，可配置 npm 全局目录到用户目录：
# 创建全局包目录 mkdir -p ~/.npm-global # 配置npm使用该目录 npm config set prefix '~/.npm-global' # 添加到环境变量 echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc source ~/.zshrc 问题 4：Angular CLI 版本与项目版本不匹配
项目根目录执行ng update升级项目依赖：
ng update @angular/core @angular/cli 六、总结
Angular 环境搭建的核心是 “版本兼容 + 正确安装”：
- 先安装匹配版本的 Node.js（LTS 版优先），利用 nvm 管理多版本；
- 配置 npm 镜像提升下载速度，全局安装 Angular CLI；
- 通过创建测试项目验证环境可用性。
掌握以上步骤，即可快速搭建稳定的 Angular 开发环境，为后续的组件开发、路由配置、状态管理等进阶学习打下基础。如果在搭建过程中遇到问题，优先检查版本兼容和环境变量配置，也可参考 Angular 官方文档或社区问答排查。
