Angular 作为 Google 推出的前端框架，凭借其完整的生态、强类型支持和企业级开发特性，成为大型前端项目的首选之一。而搭建稳定、合规的 Angular 开发环境，是入门和进阶的第一步 —— 核心围绕 Node.js、npm（包管理工具）和 Angular CLI（脚手架工具）三大组件展开。将从环境准备、分步安装、配置优化到问题排查，全方位解析 Angular 环境搭建的全流程。 一、…
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 是 Angular 运行的基础（Angular CLI 依赖 Node.js 环境），npm（Node Package Manager）随 Node.js 自带，用于管理依赖包。
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
若需同时开发多个项目（不同 Angular 版本），建议用 nvm（Node Version Manager）管理 Node.js 版本：
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
配置 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 是官方脚手架工具，可一键创建项目、启动开发服务器、构建生产包等，必须全局安装。
# 安装最新稳定版 npm install -g @angular/cli # 安装指定版本（如17.0.0） npm install -g @angular/cli@17.0.0
注意：若 Windows 系统提示 '权限不足'，以管理员身份运行命令提示符；
macOS/Linux 若提示权限错误，可添加--unsafe-perm：
sudo npm install -g @angular/cli --unsafe-perm
# 查看CLI版本 ng version # 或简写 ng v
若输出 Angular CLI 版本、Node.js 版本等信息，说明安装成功；若提示 'ng 不是内部或外部命令'，需检查 npm 全局包路径是否加入系统环境变量：
C:\Users\你的用户名\AppData\Roaming\npm，需添加到系统 PATH；/usr/local/bin，一般已加入环境变量。# 卸载现有CLI npm uninstall -g @angular/cli # 清理缓存 npm cache clean --force # 重新安装最新版 npm install -g @angular/cli
环境搭建完成后，通过创建并运行项目验证是否可用：
# 创建名为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即可。等待依赖安装完成（首次安装可能较慢，耐心等待）。
# 进入项目目录 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 默认欢迎页，说明环境完全正常！
解决方案：配置淘宝镜像（见 2.2 节），或使用 cnpm 替代 npm：
npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install -g @angular/cli
清除项目依赖并重新安装：
rm -rf node_modules package-lock.json # Windows：rd /s /q node_modules && del package-lock.json npm install
避免使用 sudo 安装全局包，可配置 npm 全局目录到用户目录：
# 创建全局包目录 mkdir -p ~/.npm-global # 配置npm使用该目录 npm config set prefix '~/.npm-global' # 添加到环境变量 echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc source ~/.zshrc
项目根目录执行ng update升级项目依赖：
ng update @angular/core @angular/cli
Angular 环境搭建的核心是 '版本兼容 + 正确安装'：
掌握以上步骤，即可快速搭建稳定的 Angular 开发环境，为后续的组件开发、路由配置、状态管理等进阶学习打下基础。如果在搭建过程中遇到问题，优先检查版本兼容和环境变量配置，也可参考 Angular 官方文档或社区问答排查。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online