Angular入门启蒙04，我的第一个 Angular 项目：从 ng new 到浏览器运行的完整指南-编程实验室

作为前端开发者，接触 Angular 这种企业级前端框架时，从 0 到 1 搭建第一个项目往往是入门的关键一步。本文将手把手带你完成从环境准备、创建项目到最终在浏览器运行的全流程，即使你是 Angular 新手，也能轻松跟上。

一、前置准备：搭建 Angular 开发环境

Angular 基于 Node.js 构建，因此第一步要确保本地安装了合适的 Node.js 和包管理工具（npm/yarn）。

1. 安装 Node.js 和 npm

Angular 对 Node.js 版本有明确要求（不同 Angular 版本对应不同 Node 版本，建议安装 LTS 版）：

访问Node.js 官网，下载并安装长期支持版（LTS），npm 会随 Node.js 自动安装。
验证安装：打开终端（Windows CMD/PowerShell、Mac/Linux 终端），执行以下命令，若输出版本号则安装成功：
```
node -v # 查看Node.js版本，建议18.x/20.x npm -v # 查看npm版本，建议9.x以上
```

2. 全局安装 Angular CLI

Angular CLI（Command Line Interface）是 Angular 官方的脚手架工具，能快速创建项目、生成组件 / 服务、启动开发服务器等，必须全局安装：

# 使用npm全局安装Angular CLI npm install -g @angular/cli # 验证安装（输出CLI版本则成功） ng version

小贴士：若安装报错（如权限问题），Mac/Linux 可加sudo，Windows 建议以管理员身份运行终端；也可使用yarn global add @angular/cli（需先安装 yarn）。

二、创建第一个 Angular 项目：ng new

环境就绪后，用 Angular CLI 创建新项目，这一步会自动生成项目骨架、配置文件和依赖。

1. 执行创建命令

打开终端，进入你想存放项目的目录（如cd ~/projects），执行以下命令：

# ng new 项目名（建议小写、无空格，如my-first-angular-app） ng new my-first-angular-app

2. 交互式配置选择

执行命令后，CLI 会弹出几个配置选项，新手建议按以下选择：

Would you like to add Angular routing?（是否添加路由）：选Yes（后续开发路由更方便）。
Which stylesheet format would you like to use?（样式文件格式）：选CSS（新手最易上手，也可选 SCSS/SASS/LESS）。

3. 等待项目初始化

CLI 会自动下载项目依赖（node_modules），这个过程耗时取决于网络速度，耐心等待即可。成功后终端会提示：Packages installed successfully.

三、项目结构快速了解（可选）

创建完成后，进入项目目录（cd my-first-angular-app），可以先简单了解核心文件：

my-first-angular-app/ ├── node_modules/ # 项目依赖包 ├── src/ # 源码目录（核心开发区） │ ├── app/ # 应用核心模块/组件 │ │ ├── app.component.ts # 根组件逻辑 │ │ ├── app.component.html # 根组件模板 │ │ ├── app.component.css # 根组件样式 │ │ └── app-routing.module.ts # 路由配置 │ ├── index.html # 应用入口HTML │ └── main.ts # 应用启动入口 ├── angular.json # Angular CLI配置文件 ├── package.json # 项目依赖和脚本配置 └── tsconfig.json # TypeScript配置

四、启动开发服务器：运行项目

Angular CLI 内置了开发服务器，支持热重载（修改代码自动刷新浏览器），是开发阶段的核心工具。

1. 启动命令

在项目根目录执行：

# 启动开发服务器（默认端口4200） ng serve

也可指定端口（避免端口冲突）：

# 启动并指定端口为4300 ng serve --port 4300

2. 等待编译完成

终端会输出编译进度，成功后会显示：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Compiled successfully.

五、浏览器访问项目

打开任意浏览器，在地址栏输入http://localhost:4200（若指定了端口则输入对应地址，如http://localhost:4300），回车后就能看到 Angular 默认的欢迎页面：

页面显示 “Welcome to my-first-angular-app!”
下方有 Angular 的 logo 和核心特性说明，说明项目已成功运行！

六、修改代码，体验热重载

Angular 开发服务器支持热重载，修改代码无需重启服务器，浏览器会自动刷新：

打开项目目录下的src/app/app.component.html文件；

替换默认内容，比如：

<h1>我的第一个Angular项目！</h1> <p>恭喜，Angular项目运行成功🎉</p>

保存文件，回到浏览器，页面会自动刷新，显示你修改后的内容。

七、常见问题排查

若运行过程中遇到问题，可参考以下解决方案：

端口被占用：执行ng serve --port 新端口（如 4201），或关闭占用 4200 端口的程序；
依赖安装失败：删除node_modules和package-lock.json，重新执行npm install，或切换 npm 镜像（npm config set registry https://registry.npmmirror.com）；
ng 命令找不到：检查 Node.js 环境变量，或重新全局安装 Angular CLI（npm install -g @angular/cli）；
编译报错：检查代码语法（如 TypeScript 语法错误），或确认 Angular CLI 版本与 Node.js 版本兼容。