Ubuntu 18.04上怎么安装Angular

# Ubuntu 18.04上怎么安装Angular

Angular是由Google维护的一款流行的前端框架，用于构建动态单页应用程序（SPA）。本文将详细介绍在Ubuntu 18.04系统上安装Angular开发环境的完整步骤，包括Node.js、npm/yarn以及Angular CLI的配置。

---

## 1. 准备工作

在开始安装之前，请确保：
- 已拥有**Ubuntu 18.04系统**的管理员权限（sudo权限）
- 终端可正常访问互联网
- 系统已更新至最新状态（运行以下命令）：

```bash
sudo apt update && sudo apt upgrade -y

---

2. 安装Node.js

Angular依赖于Node.js运行时环境。Ubuntu 18.04默认仓库中的Node.js版本较旧，建议通过NodeSource安装最新LTS版本：

2.1 添加NodeSource仓库

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

注意：Angular 13+需要Node.js 16+，若需其他版本请替换setup_16.x中的数字。

2.2 安装Node.js和npm

sudo apt install -y nodejs

2.3 验证安装

node --version  # 应显示v16.x或更高
npm --version   # 应显示8.x或更高

---

3. 可选：安装Yarn（替代npm）

Yarn是更快的JavaScript包管理器：

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

验证：

yarn --version

---

4. 安装Angular CLI

Angular CLI是官方提供的脚手架工具：

4.1 使用npm安装

sudo npm install -g @angular/cli

或使用yarn安装

sudo yarn global add @angular/cli

4.2 验证安装

ng version

成功后会显示Angular CLI版本和核心依赖版本。

---

5. 解决常见权限问题

5.1 修复全局安装权限

如果遇到EACCES错误，建议配置npm全局目录权限：

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

5.2 使用npx避免全局安装

npx @angular/cli new my-project

---

6. 创建第一个Angular项目

6.1 初始化项目

ng new my-angular-app

CLI会交互式询问： - 是否添加Angular路由（建议选Yes） - 选择样式格式（CSS/SCSS等）

6.2 进入项目目录

cd my-angular-app

6.3 启动开发服务器

ng serve --open

访问http://localhost:4200即可看到欢迎页面。

---

7. 生产环境构建

生成优化后的代码：

ng build --prod

构建产物位于dist/my-angular-app目录。

---

8. 进阶配置

8.1 安装常用扩展

ng add @angular/material   # 添加Material UI
ng add @angular/pwa        # 添加PWA支持

8.2 更新Angular CLI

ng update @angular/cli @angular/core

---

9. 卸载步骤

如需完全移除：

sudo npm uninstall -g @angular/cli
sudo apt remove nodejs yarn
sudo rm -rf /etc/apt/sources.list.d/yarn.list

---

10. 常见问题解答

Q1: 出现Error: ENOSPC怎么办？

这是由于系统文件监视限制，运行：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

Q2: 如何切换Node.js版本？

推荐使用nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install 18  # 安装Node.js 18
nvm use 18

---

结语

现在您已在Ubuntu 18.04上成功搭建了Angular开发环境。建议： 1. 定期运行ng update保持依赖最新 2. 查阅Angular官方文档深入学习 3. 使用VS Code配合Angular插件获得更好开发体验

如需更详细的配置（如Docker开发环境或CI/CD集成），可参考Angular社区的进阶指南。 “`

这篇文章提供了从环境准备到项目创建的完整流程，包含： - 分步骤的代码块 - 常见问题解决方案 - 版本选择建议 - 权限管理等细节提示 可根据实际需要调整版本号或补充特定场景的配置说明。