Angular安装与环境搭建 #

一、环境准备 #

1.1 系统要求 #

要求	最低版本	推荐版本
Node.js	18.x	20.x LTS
npm	9.x	10.x
操作系统	Windows 10/macOS 10.15/Ubuntu 18.04	最新稳定版

1.2 安装Node.js #

Windows/macOS:

访问 Node.js官网
下载LTS版本安装包
运行安装程序

使用nvm管理Node.js版本（推荐）:

bash

# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装Node.js
nvm install 20

# 使用指定版本
nvm use 20

# 设置默认版本
nvm alias default 20

1.3 验证安装 #

bash

# 检查Node.js版本
node -v
# 输出: v20.x.x

# 检查npm版本
npm -v
# 输出: 10.x.x

二、安装Angular CLI #

Angular CLI是Angular的命令行工具，用于创建项目、生成代码、执行测试等。

2.1 全局安装 #

bash

npm install -g @angular/cli

2.2 验证安装 #

bash

ng version
# 或
ng v

输出示例：

text

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 17.0.0
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin arm64

2.3 常用CLI命令 #

命令	说明
`ng new`	创建新项目
`ng serve`	启动开发服务器
`ng build`	构建项目
`ng test`	运行单元测试
`ng generate`	生成代码（组件、服务等）
`ng add`	添加第三方库
`ng update`	更新Angular版本

三、创建第一个Angular项目 #

3.1 创建项目 #

bash

ng new my-first-app

创建过程中的选项：

text

? What name would you like to use for this project? my-first-app
? Which stylesheet format would you like to use? 
  CSS
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org ]

? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N) N

3.2 项目创建选项说明 #

bash

# 使用CSS样式
ng new my-app --style=css

# 使用SCSS样式
ng new my-app --style=scss

# 启用路由
ng new my-app --routing

# 跳过测试文件
ng new my-app --skip-tests

# 跳过安装依赖（稍后手动安装）
ng new my-app --skip-install

# 使用独立组件（推荐）
ng new my-app --standalone

3.3 项目目录结构 #

text

my-first-app/
├── .vscode/              # VS Code配置
│   └── extensions.json   # 推荐扩展
├── src/                  # 源代码目录
│   ├── app/              # 应用代码
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── app.component.spec.ts
│   ├── assets/           # 静态资源
│   ├── environments/     # 环境配置
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   ├── favicon.ico       # 网站图标
│   ├── index.html        # 入口HTML
│   ├── main.ts           # 应用入口
│   └── styles.css        # 全局样式
├── angular.json          # Angular配置
├── package.json          # 项目依赖
├── tsconfig.json         # TypeScript配置
└── README.md             # 项目说明

四、启动开发服务器 #

4.1 启动项目 #

bash

cd my-first-app
ng serve

4.2 常用启动选项 #

bash

# 指定端口
ng serve --port 4201

# 自动打开浏览器
ng serve --open

# 使用SSL
ng serve --ssl

# 指定主机
ng serve --host 0.0.0.0

# 禁用热更新
ng serve --live-reload false

4.3 访问应用 #

默认访问地址：http://localhost:4200

text

** Angular Live Development Server is listening on localhost:4200 **

√ Compiled successfully.

五、IDE配置 #

5.1 VS Code推荐扩展 #

json

{
  "recommendations": [
    "Angular.ng-template",
    "TypeScriptTeam.TypeScript-101",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

5.2 推荐扩展说明 #

扩展	说明
Angular Language Service	Angular模板智能提示
TypeScript Hero	TypeScript代码导航
Prettier	代码格式化
ESLint	代码检查
Auto Import	自动导入

5.3 VS Code配置 #

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.preferences.importModuleSpecifier": "relative"
}

六、Angular CLI代码生成 #

6.1 生成组件 #

bash

# 生成组件
ng generate component user
# 简写
ng g c user

# 指定目录
ng g c components/user

# 生成内联模板和样式
ng g c user --inline-template --inline-style

# 跳过测试文件
ng g c user --skip-tests

6.2 生成其他类型 #

bash

# 生成服务
ng g s services/user

# 生成模块
ng g m modules/user

# 生成指令
ng g d directives/highlight

# 生成管道
ng g p pipes/date-format

# 生成守卫
ng g guard guards/auth

6.3 生成类型简写 #

类型	完整命令	简写
Component	`ng generate component`	`ng g c`
Service	`ng generate service`	`ng g s`
Module	`ng generate module`	`ng g m`
Directive	`ng generate directive`	`ng g d`
Pipe	`ng generate pipe`	`ng g p`
Guard	`ng generate guard`	`ng g g`

七、项目配置 #

7.1 angular.json配置 #

json

{
  "projects": {
    "my-app": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "styles": ["src/styles.css"],
            "scripts": []
          }
        }
      }
    }
  }
}

7.2 常用配置项 #

配置项	说明
`prefix`	组件选择器前缀
`styles`	全局样式文件
`scripts`	全局脚本文件
`assets`	静态资源目录
`budgets`	构建大小限制

八、常见问题解决 #

8.1 npm安装缓慢 #

bash

# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com

# 或使用pnpm
npm install -g pnpm
pnpm install

8.2 权限问题 #

bash

# macOS/Linux修改npm全局目录
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

8.3 清除缓存 #

bash

# 清除npm缓存
npm cache clean --force

# 删除node_modules重新安装
rm -rf node_modules
npm install

九、总结 #

步骤	命令
安装Node.js	官网下载或使用nvm
安装Angular CLI	`npm install -g @angular/cli`
创建项目	`ng new my-app`
启动项目	`ng serve`
访问应用	`http://localhost:4200`

下一步：第一个Angular应用