🎬 HoRain云小助手：个人主页

 🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

---

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

目录

⛳️ 推荐

专栏介绍

1. 安装 Node.js 和 npm

2. 安装 Angular CLI

3. 创建新项目

4. 启动开发服务器

5. 项目结构概览

6. 主要配置文件说明

7. 安装第三方库

8. 生产构建

注意事项

---

Angular 2 的环境配置主要依赖于 Node.js、npm​ 和 Angular CLI。以下是详细的环境配置步骤：

---

1. 安装 Node.js 和 npm

Angular 需要 Node.js 版本 ≥ 4.x 和 npm 版本 ≥ 3.x。

• 下载 Node.js 安装包（包含 npm）：Node.js 官网

• 安装后验证：

  node -v
  npm -v

---

2. 安装 Angular CLI

Angular CLI 是官方提供的脚手架工具，用于快速创建和管理项目。

npm install -g @angular/cli

安装后验证：

ng version

---

3. 创建新项目

ng new my-app

按提示选择配置（如路由、CSS 预处理器等）。

---

4. 启动开发服务器

cd my-app
ng serve --open

项目将在 http://localhost:4200自动打开。

---

5. 项目结构概览

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── ...
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── angular.json
├── package.json
└── tsconfig.json

---

6. 主要配置文件说明

• package.json：依赖包配置。

• tsconfig.json：TypeScript 编译配置。

• angular.json：Angular 项目配置（构建、服务等）。

---

7. 安装第三方库

通过 npm 安装库（例如 Bootstrap）：

npm install bootstrap

在 angular.json的 styles数组中添加 Bootstrap 的 CSS 路径：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

---

8. 生产构建

ng build --prod

构建输出在 dist/目录。

---

注意事项

1. 确保网络畅通，避免依赖安装失败。

2. 如遇到权限问题，尝试使用管理员权限或 sudo（Mac/Linux）。

3. 可配置淘宝镜像加速 npm：

   npm config set registry https://registry.npmmirror.com

---

如果需要特定版本的 Angular 2 配置（如 2.x 旧版本），请参考历史文档或说明具体版本需求！

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙