Angular入门启蒙03，Angular 环境搭建全解析：Node.js、npm 与 Angular CLI 安装配置

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/cli@17.0.0 

注意：若 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 会提示：

1. 是否添加路由（Would you like to add Angular routing?）：建议选Yes；
2. 选择样式预处理器（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 环境搭建的核心是 '版本兼容 + 正确安装'：

1. 先安装匹配版本的 Node.js（LTS 版优先），利用 nvm 管理多版本；
2. 配置 npm 镜像提升下载速度，全局安装 Angular CLI；
3. 通过创建测试项目验证环境可用性。

掌握以上步骤，即可快速搭建稳定的 Angular 开发环境，为后续的组件开发、路由配置、状态管理等进阶学习打下基础。如果在搭建过程中遇到问题，优先检查版本兼容和环境变量配置，也可参考 Angular 官方文档或社区问答排查。