环境配置

本章将介绍如何搭建 Angular 开发环境，包括 Node.js 安装、Angular CLI 使用以及项目创建。

前置要求

在开始之前，请确保你的开发环境满足以下要求：

• Node.js：版本 18.19.1 或更高（推荐使用 LTS 版本）
• 包管理器：npm（随 Node.js 安装）、yarn 或 pnpm
• 代码编辑器：推荐使用 Visual Studio Code

安装 Node.js

访问 Node.js 官网 下载并安装 LTS 版本。安装完成后，在终端中验证：

node -v
npm -v

安装 Angular CLI

Angular CLI（命令行界面）是创建、构建和维护 Angular 应用的官方工具。

npm install -g @angular/cli

安装完成后，验证 CLI 是否安装成功：

ng version

输出类似如下信息：

Angular CLI: 19.0.0
Node: 20.10.0
Package Manager: npm 10.2.3
OS: win32 x64

创建第一个 Angular 项目

使用 Angular CLI 创建新项目非常简单：

ng new my-first-app

CLI 会提示你选择一些配置选项：

? Which stylesheet format would you like to use? 
  CSS
  SCSS   [ https://sass-lang.com/documentation/syntax ]
  Sass   [ https://sass-lang.com/documentation/syntax ]
  Less   [ http://lesscss.org ]
❯ SCSS   (推荐选择，提供更强大的样式编写能力)

? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?
❯ No   (初学者可以先选择 No，后续可以手动添加)

项目结构

创建完成后，项目目录结构如下：

my-first-app/
├── .angular/           # Angular CLI 缓存
├── .vscode/            # VS Code 配置
├── src/                # 源代码目录
│   ├── app/            # 应用代码
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── assets/         # 静态资源
│   ├── index.html      # 入口 HTML
│   ├── main.ts         # 应用入口
│   └── styles.scss     # 全局样式
├── angular.json        # Angular 配置
├── package.json        # 项目依赖
├── tsconfig.json       # TypeScript 配置
└── README.md

关键文件说明

文件	说明
src/main.ts	应用入口文件，启动 Angular 应用
src/app/app.component.ts	根组件，定义组件逻辑
src/app/app.config.ts	应用配置，配置服务提供者
src/app/app.routes.ts	路由配置
angular.json	Angular CLI 配置文件

启动开发服务器

进入项目目录并启动开发服务器：

cd my-first-app
ng serve

或者使用简写：

ng s

服务器启动后，访问 http://localhost:4200 即可看到应用运行效果。

常用启动选项

# 指定端口
ng serve --port 4201

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

# 使用代理配置
ng serve --proxy-config proxy.conf.json

# 启用 HMR（热模块替换）
ng serve --hmr

Angular CLI 常用命令

Angular CLI 提供了丰富的命令来简化开发：

项目管理

# 创建新项目
ng new project-name

# 创建新项目（使用独立组件）
ng new project-name --standalone

# 构建项目
ng build

# 构建生产版本
ng build --configuration production

生成代码

# 生成组件
ng generate component component-name
ng g c component-name

# 生成服务
ng generate service service-name
ng g s service-name

# 生成指令
ng generate directive directive-name
ng g d directive-name

# 生成管道
ng generate pipe pipe-name
ng g p pipe-name

# 生成模块（可选，现代 Angular 推荐独立组件）
ng generate module module-name
ng g m module-name

其他命令

# 运行测试
ng test

# 运行端到端测试
ng e2e

# 代码格式化
ng lint

# 添加第三方库
ng add @angular/material

VS Code 推荐扩展

安装以下扩展可以提升 Angular 开发体验：

1. Angular Language Service：Angular 官方扩展，提供模板智能提示和错误检查
2. Angular Snippets：常用代码片段
3. ESLint：代码质量检查
4. Prettier：代码格式化
5. Material Icon Theme：文件图标

配置 TypeScript

Angular 项目使用 TypeScript，tsconfig.json 配置了编译选项：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "lib": ["ES2022", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

小结

1. Node.js 是 Angular 开发的基础环境
2. Angular CLI 是创建和管理 Angular 项目的核心工具
3. ng new 命令创建新项目，ng serve 启动开发服务器
4. 推荐使用 VS Code 和相关扩展提升开发效率

下一步

环境配置完成后，接下来学习 组件基础，了解 Angular 组件的核心概念。