Angular环境搭建

安装 Node.js

在搭建 Angular 环境之前，首先需要确保系统中安装了 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它允许我们在服务器端运行 JavaScript 代码。Angular CLI（命令行界面）是基于 Node.js 开发的，所以 Node.js 是搭建 Angular 环境的基础。

下载 Node.js：
- 访问 Node.js 官方网站（https://nodejs.org/）。在网站上，你会看到有两个主要的版本分支：LTS（长期支持）版本和 Current（当前）版本。LTS 版本稳定性更高，推荐用于生产环境；Current 版本则包含了最新的特性，但可能存在一些稳定性问题，适合用于学习和开发实验性项目。对于大多数开发者，建议下载 LTS 版本。
- 根据你的操作系统（Windows、macOS 或 Linux）选择对应的安装包进行下载。例如，如果你使用的是 Windows 系统，点击 Windows Installer 下载 .msi 安装文件；如果是 macOS 系统，点击 macOS Installer 下载 .pkg 安装文件。
安装 Node.js：
- Windows 系统：
  - 双击下载的 .msi 文件，启动安装向导。在安装向导的欢迎界面，点击“Next”。
  - 阅读并接受许可协议，再次点击“Next”。
  - 选择安装路径。你可以使用默认路径，也可以点击“Change”选择自定义路径。一般建议使用默认路径，这样便于后续管理和维护。点击“Next”。
  - 选择要安装的组件。通常保持默认选择即可，这些组件包括 Node.js 运行时、npm（Node.js 包管理器）等。点击“Next”。
  - 安装程序会显示安装进度。安装完成后，点击“Finish”。
- macOS 系统：
  - 双击下载的 .pkg 文件，启动安装向导。在欢迎界面，点击“继续”。
  - 阅读软件许可协议，点击“同意”。
  - 选择安装位置，一般默认选择“Macintosh HD”即可，点击“安装”。
  - 系统可能会提示输入管理员密码，输入密码后点击“安装软件”。安装完成后，点击“关闭”。
- Linux 系统：
  - 不同的 Linux 发行版安装 Node.js 的方式略有不同。以 Ubuntu 为例，可以通过以下步骤安装：
    - 打开终端，使用以下命令更新软件包列表：
```
sudo apt update
```
    - 添加 Node.js 官方仓库：
```
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
```
    - 安装 Node.js 和 npm：
```
sudo apt install -y nodejs
```
验证安装：
- 安装完成后，打开终端（Windows 系统打开命令提示符或 PowerShell），输入以下命令检查 Node.js 版本：
```
node -v
```
- 输入以下命令检查 npm 版本：
```
npm -v
```
- 如果安装成功，你将看到 Node.js 和 npm 的版本号。例如，输出可能类似于：
```
v14.17.0
6.14.13
```

安装 Angular CLI

Angular CLI 是 Angular 开发的核心工具，它提供了一系列命令来创建、开发和维护 Angular 项目。它可以帮助我们快速搭建项目结构、生成组件、服务等代码文件，并且还集成了开发服务器、代码构建和测试等功能。

全局安装 Angular CLI：
- 在安装好 Node.js 和 npm 后，打开终端，使用以下命令全局安装 Angular CLI：
```
npm install -g @angular/cli
```
- -g 参数表示全局安装，这样在系统的任何目录下都可以使用 ng 命令（Angular CLI 的命令前缀）。安装过程中，npm 会从 npm 仓库下载 Angular CLI 及其依赖项，并将其安装到系统的全局环境中。这个过程可能需要一些时间，具体取决于你的网络速度。
验证安装：
- 安装完成后，在终端中输入以下命令验证 Angular CLI 是否安装成功：
```
ng version
```
- 如果安装成功，你将看到 Angular CLI 的版本号，以及相关的 Angular 核心包的版本信息。例如：
```
_                      _                 ____ _     ___
```
/ \ _ __ __ _ _ | | __ _ _ __ / | | | | / △ \ | ' \ / _ | | | | |/ _ | '| | | | | | | / ___ | | | | (| | || | | (| | | | || | | | // __| ||_, |_,||_,|| _||| |___/

Angular CLI: 12.2.10 Node: 14.17.0 Package Manager: npm 6.14.13 OS: win32 x64

Angular: 12.2.10 ... animations, common, compiler, compiler - cli, core, forms ... platform - browser, platform - browser - dynamic, router

Package Version

@angular - cli/architect 12.2.10 @angular - cli/build - browser 12.2.10 @angular - cli/build - optimizer 12.2.10 @angular - cli/build - webpack 12.2.10 @angular - cli/convert 12.2.10 @angular - cli/init 12.2.10 @angular - cli/serve 12.2.10 @angular - cli/generate 12.2.10 @angular - cli/add 12.2.10 @angular - cli/upgrade 12.2.10 @schematics/angular 12.2.10 rxjs 6.6.7 typescript 4.3.5

创建第一个 Angular 项目

在安装好 Angular CLI 后，我们就可以使用它来创建一个新的 Angular 项目。Angular CLI 提供了一个简单的命令来生成项目的基本结构，包括项目配置文件、组件、模块等。

创建项目：
- 打开终端，导航到你想要创建项目的目录。例如，如果你想在 Documents 目录下创建项目，可以使用以下命令（Windows 系统使用 cd 命令，这里以 Linux 或 macOS 为例）：
```
cd ~/Documents
```
- 使用以下命令创建一个新的 Angular 项目，假设项目名为 my - first - angular - app：
```
ng new my - first - angular - app
```
- 运行上述命令后，Angular CLI 会提示你一些选项，例如是否使用 Angular Router（用于路由功能），以及选择 CSS 预处理器（如 SCSS、Less 等）。如果你不确定如何选择，可以按回车键接受默认选项。
  - 是否使用 Angular Router：如果你的应用需要实现页面之间的导航功能，建议选择 Yes。例如，一个多页面的电商应用，用户从首页导航到商品详情页、购物车页等，就需要路由功能。如果是一个简单的单页面应用，没有页面导航需求，可以选择 No。
  - 选择 CSS 预处理器：CSS 预处理器可以让你使用一些高级的 CSS 特性，如变量、混合、嵌套等，提高 CSS 的开发效率。常见的 CSS 预处理器有 SCSS（Sass 的一种语法）、Less 等。如果你对预处理器不熟悉，选择 CSS 即可使用原生 CSS。如果有一定的前端开发经验，推荐使用 SCSS，它是目前比较流行的预处理器之一。
项目结构：
- 创建完成后，进入项目目录：
```
cd my - first - angular - app
```
- 使用文件管理器或命令行工具（如 tree 命令，在 Windows 系统中可能需要安装额外的工具来使用 tree 命令）查看项目结构。一个典型的 Angular 项目结构如下：
```
my - first - angular - app/
├── README.md
├── angular.json
├── browserslist
├──.editorconfig
├──.gitignore
├── karma.conf.js
├── package - lock.json
├── package.json
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets/
│   ├── environments/
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json
```
- 下面对主要的文件和目录进行解释：
  - src/ 目录：这是项目的源代码目录，所有的应用代码都放在这里。
    - app/ 目录：包含应用的组件、模块等核心代码。app.component.ts 是应用的根组件，整个应用从这个组件开始启动。app.module.ts 是应用的根模块，它定义了应用的组件、服务等模块相关的配置。
    - assets/ 目录：用于存放静态资源，如图像、字体、JSON 文件等。
    - environments/ 目录：包含不同环境下的配置文件，如 environment.ts 用于开发环境配置，environment.prod.ts 用于生产环境配置。这些文件通常用于配置 API 地址等与环境相关的参数。
    - index.html：是应用的入口 HTML 文件，它加载了应用的 JavaScript 和 CSS 文件，并提供了一个容器（通常是 <app - root> 标签）来挂载 Angular 应用。
    - main.ts：是应用的入口 TypeScript 文件，它启动了 Angular 应用，并将根模块（AppModule）渲染到 index.html 中的 <app - root> 标签上。
  - angular.json：这是项目的配置文件，它包含了项目的构建、开发服务器、测试等各种配置选项。例如，你可以在这里配置项目的输出路径、开发服务器的端口号、CSS 预处理器的相关配置等。
  - package.json：是 Node.js 项目的依赖管理文件，它记录了项目所依赖的各种 npm 包及其版本号。同时，它还包含了一些脚本命令，如 start（用于启动开发服务器）、build（用于构建生产版本的应用）等。
  - tsconfig.json：是 TypeScript 的配置文件，它定义了 TypeScript 编译器的编译选项，如目标 ECMAScript 版本、模块系统、严格模式等。

运行 Angular 项目

创建好 Angular 项目后，我们可以使用 Angular CLI 提供的命令来运行项目。Angular CLI 集成了一个开发服务器，它可以实时监听代码的变化，并自动重新加载页面，方便我们进行开发。

启动开发服务器：

在项目目录下（即 my - first - angular - app 目录），打开终端并输入以下命令启动开发服务器：
```
ng serve
```

运行上述命令后，Angular CLI 会编译项目代码，并启动开发服务器。默认情况下，开发服务器会监听 http://localhost:4200 地址。你会在终端中看到类似以下的输出：

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2023 - 09 - 15T08:30:00.000Z
Hash: 1234567890abcdef
Time: 5000ms
chunk {main} main.js, main.js.map (main) 10.01 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227.44 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 1.25 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 19.35 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 684.34 kB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

访问应用：
- 打开浏览器，访问 http://localhost:4200。你将看到 Angular 项目的初始页面，通常是一个显示“Welcome to my - first - angular - app!”的页面（如果项目名为 my - first - angular - app）。这表明你的 Angular 项目已经成功运行。
- 在开发过程中，当你修改项目中的代码（如组件的 HTML、CSS 或 TypeScript 文件）并保存后，开发服务器会自动检测到变化并重新编译代码，浏览器会自动刷新显示最新的页面。这种实时重载（Live Reload）功能大大提高了开发效率，让你能够快速看到代码修改的效果。

常见问题及解决方法

在搭建 Angular 环境和运行项目的过程中，可能会遇到一些问题。以下是一些常见问题及解决方法：

npm 安装依赖失败：
- 问题描述：在安装 Angular CLI 或创建项目时，npm 安装依赖项可能会失败，提示网络错误或其他安装错误。
- 解决方法：
  - 网络问题：首先检查网络连接是否正常。可以尝试访问其他网站，确保网络畅通。如果是因为网络代理问题导致安装失败，可以设置 npm 的代理。例如，在命令行中输入以下命令设置 http 和 https 代理（假设代理地址为 proxy.example.com:8080）：
```
npm config set proxy http://proxy.example.com:8080
npm config set https - proxy http://proxy.example.com:8080
```
    如果不需要代理了，可以使用以下命令取消代理设置：
```
npm config delete proxy
npm config delete https - proxy
```
  - npm 仓库问题：有时 npm 官方仓库可能不稳定或被墙。可以尝试使用国内的 npm 镜像源，如淘宝镜像源。使用以下命令将 npm 镜像源切换到淘宝镜像：
```
npm config set registry https://registry.npm.taobao.org
```
    可以使用以下命令查看当前的 npm 镜像源：
```
npm config get registry
```
    如果想切回官方镜像源，使用以下命令：
```
npm config set registry https://registry.npmjs.org
```
  - 版本兼容性问题：某些情况下，安装失败可能是因为包的版本不兼容。可以尝试指定安装包的版本。例如，在安装 Angular CLI 时，可以指定一个特定的版本，如：
```
npm install -g @angular/cli@12.2.10
```
Angular CLI 命令未找到：
- 问题描述：在全局安装了 Angular CLI 后，在终端中输入 ng 命令提示“Command not found”。
- 解决方法：
  - 环境变量问题：这通常是因为 Node.js 和 npm 的安装目录没有添加到系统的环境变量中。在 Windows 系统中，需要将 Node.js 的安装目录（例如 C:\Program Files\nodejs）及其 node_modules\.bin 目录（例如 C:\Program Files\nodejs\node_modules\.bin）添加到系统的 PATH 环境变量中。在 macOS 和 Linux 系统中，需要确保 Node.js 的安装目录及其 node_modules\.bin 目录在 $PATH 环境变量中。可以通过编辑 .bashrc（在 Linux 或 macOS 系统中）或 .zshrc（如果使用 Zsh shell）文件，添加以下内容（假设 Node.js 安装在 /usr/local/bin 目录）：
```
export PATH="/usr/local/bin:$PATH"
export PATH="/usr/local/bin/node_modules/.bin:$PATH"
```
    然后在终端中执行 source ~/.bashrc 或 source ~/.zshrc 使配置生效。
项目编译错误：
- 问题描述：在运行 ng serve 或 ng build 命令时，出现编译错误，提示语法错误或其他类型的错误。
- 解决方法：
  - 语法错误：仔细查看终端中输出的错误信息，通常错误信息会指出错误发生的文件和行数。例如，如果提示 app.component.ts 文件中某行有语法错误，打开该文件，检查对应的代码行。常见的语法错误包括 TypeScript 语法错误（如变量未定义、类型不匹配等）、HTML 模板语法错误（如标签未闭合、属性使用错误等）、CSS 语法错误等。
  - 依赖问题：有时编译错误可能是因为依赖的包版本不兼容或缺少依赖。可以尝试删除项目目录下的 node_modules 目录，然后重新运行 npm install 命令重新安装所有依赖。另外，查看 package.json 文件中依赖包的版本，确保它们之间相互兼容。例如，如果使用了某个 Angular 组件库，需要确保该组件库的版本与当前项目的 Angular 版本兼容。