新建一个angular项目

新建一个 Angular 项目主要分为三个步骤：安装环境、创建项目 和 启动项目。

第一步：安装必要的环境

在使用 Angular 之前，你的电脑上必须安装 Node.js。Angular CLI（命令行工具）依赖于 Node.js 来运行。

1. 安装 Node.js：
   • 访问 Node.js 官网。
   • 下载并安装 LTS 版本（长期支持版，最稳定）。
   • 提示：安装后，在终端输入 node -v 和 npm -v 检查是否安装成功。
2. 全局安装 Angular CLI：
   • 打开终端（Terminal、CMD 或 PowerShell）。
   • 输入以下命令并回车：

     npm install -g @angular/cli
     

   • 这个命令会全局安装 Angular 的命令行工具，安装完成后，你可以输入 ng version 来检查是否安装成功。

---

第二步：创建新项目

环境准备好后，使用 ng new 命令来创建项目。

1. 进入你想要存放项目的目录（例如 cd Desktop）。
2. 运行创建命令：

   ng new my-first-app
   

   (注：my-first-app 是你的项目名称，可以自定义)
3. 回答配置问题（以 Angular 17+ 为例）： 命令运行后，CLI 会询问你几个问题来配置项目。通常建议新手如下选择（按提示输入字母并回车）：
   • Which stylesheet format would you like to use? (你想使用哪种样式表格式？)
     • 建议选择：CSS (如果你不熟悉 SCSS/Sass，选 CSS 最简单)
   • Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (是否启用服务端渲染？)
     • 建议选择：N (No)
     • 理由：对于初学者构建普通单页应用，不需要 SSR，这样构建速度更快。

---

第三步：启动开发服务器

项目创建完成后，进入项目文件夹并启动它。

1. 进入项目目录：

   cd my-first-app
   

2. 启动项目：

   ng serve
   

   (或者使用简写 npm start)
3. 查看结果：
   • 终端显示 Local: http://localhost:4200/ 表示编译成功。
   • 打开浏览器，访问 http://localhost:4200/。
   • 如果看到 Angular 的欢迎页面（大大的 Angular Logo），恭喜你，项目创建成功！

---

常用附加操作

1. 使用 VS Code 打开项目

如果你使用 Visual Studio Code 编写代码，可以在终端中输入：

code .

(注意：需要确保你已经安装了 VS Code 并将其添加到了系统环境变量中)

2. 创建一个新组件

在开发过程中，你通常需要创建新的组件。不要手动创建文件，请使用 CLI 命令：

ng generate component my-new-component

(简写: ng g c my-new-component)

常见问题排查

1. ng 命令找不到：
   • 说明 Angular CLI 没有正确安装或环境变量没配置好。尝试重新运行 npm install -g @angular/cli。
2. 安装速度极慢：
   • 如果你在中国大陆，直接从 npm 服务器下载依赖可能会很慢。建议安装淘宝镜像源：

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

3. 端口被占用：
   • 如果 4200 端口被占用，可以使用 ng serve --port 4300 来指定其他端口。 祝你开发顺利！