# 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 Angular依赖于Node.js运行时环境。Ubuntu 18.04默认仓库中的Node.js版本较旧,建议通过NodeSource安装最新LTS版本:
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - 注意:Angular 13+需要Node.js 16+,若需其他版本请替换
setup_16.x中的数字。
sudo apt install -y nodejs node --version # 应显示v16.x或更高 npm --version # 应显示8.x或更高 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 Angular CLI是官方提供的脚手架工具:
sudo npm install -g @angular/cli sudo yarn global add @angular/cli ng version 成功后会显示Angular CLI版本和核心依赖版本。
如果遇到EACCES错误,建议配置npm全局目录权限:
mkdir ~/.npm-global npm config set prefix '~/.npm-global' echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc source ~/.bashrc npx @angular/cli new my-project ng new my-angular-app CLI会交互式询问: - 是否添加Angular路由(建议选Yes) - 选择样式格式(CSS/SCSS等)
cd my-angular-app ng serve --open 访问http://localhost:4200即可看到欢迎页面。
生成优化后的代码:
ng build --prod 构建产物位于dist/my-angular-app目录。
ng add @angular/material # 添加Material UI ng add @angular/pwa # 添加PWA支持 ng update @angular/cli @angular/core 如需完全移除:
sudo npm uninstall -g @angular/cli sudo apt remove nodejs yarn sudo rm -rf /etc/apt/sources.list.d/yarn.list Error: ENOSPC怎么办?这是由于系统文件监视限制,运行:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf sudo sysctl -p 推荐使用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社区的进阶指南。 “`
这篇文章提供了从环境准备到项目创建的完整流程,包含: - 分步骤的代码块 - 常见问题解决方案 - 版本选择建议 - 权限管理等细节提示 可根据实际需要调整版本号或补充特定场景的配置说明。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。