Angular CLI安装与使用指南

1. 环境准备

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

• Node.js：Angular CLI 是基于 Node.js 构建的，因此你需要在你的机器上安装 Node.js。你可以从Node.js 官方网站下载并安装最新的长期支持（LTS）版本。安装完成后，打开命令行工具，输入 node -v 和 npm -v 来验证安装是否成功。如果成功安装，你将看到 Node.js 和 npm 的版本号。

node -v
npm -v

2. 安装 Angular CLI

安装 Angular CLI 非常简单，只需要在命令行中使用 npm（Node Package Manager）执行以下命令：

npm install -g @angular/cli

上述命令中的 -g 标志表示全局安装，这样你就可以在系统的任何目录下使用 ng 命令（Angular CLI 的命令行工具）。安装过程可能需要一些时间，这取决于你的网络速度和机器性能。在安装过程中，npm 会下载并安装 Angular CLI 及其所有依赖项。

如果在安装过程中遇到权限问题（特别是在类 Unix 系统上），你可能需要使用 sudo 命令：

sudo npm install -g @angular/cli

然而，使用 sudo 安装全局包可能会导致权限问题，更好的解决方案是设置 npm 使用一个非全局的安装目录，具体步骤如下：

1. 创建一个目录用于存放全局 npm 包，例如 mkdir ~/.npm-global
2. 配置 npm 使用这个新目录，npm config set prefix '~/.npm-global'
3. 将 ~/.npm-global/bin 添加到你的 PATH 环境变量中。对于 Bash 或 Zsh，你可以将以下行添加到你的 .bashrc 或 .zshrc 文件中：

export PATH=~/.npm-global/bin:$PATH

然后执行 source ~/.bashrc 或 source ~/.zshrc 使更改生效。之后，你就可以在不使用 sudo 的情况下全局安装 npm 包了。

3. 验证 Angular CLI 安装

安装完成后，你可以通过在命令行中执行以下命令来验证 Angular CLI 是否安装成功：

ng version

这个命令会显示 Angular CLI 的版本号，以及本地安装的 Angular 相关包的版本信息。如果命令成功执行并显示版本号，说明 Angular CLI 已经成功安装在你的系统上。

4. 创建新的 Angular 项目

一旦 Angular CLI 安装完成，你就可以使用它来创建新的 Angular 项目。在命令行中，导航到你想要创建项目的目录，然后执行以下命令：

ng new my - project

这里的 my - project 是你项目的名称，你可以将其替换为你想要的任何名称。执行这个命令后，Angular CLI 会询问你一些关于项目的配置问题，例如是否使用路由（Routing），选择 CSS 预处理器（如 SCSS、Less 等）。

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/ ]

根据你的需求回答这些问题后，Angular CLI 会开始创建项目结构，并安装项目所需的依赖项。这可能需要一些时间，完成后，你会在指定目录下看到一个新的 Angular 项目结构。

my - project/
├── e2e/
│   ├── protractor.conf.js
│   ├── src/
│   │   ├── app.e2e-spec.ts
│   │   ├── app.po.ts
│   │   └── index.ts
│   └── tsconfig.e2e.json
├── node_modules/
├── 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.scss
│   ├── test.ts
│   └── tsconfig.app.json
│   └── tsconfig.spec.json
├──.angular - cli.json
├──.editorconfig
├──.gitignore
├── karma.conf.js
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

5. 启动 Angular 开发服务器

创建项目后，你可以启动 Angular 开发服务器来预览你的应用。在项目目录中执行以下命令：

cd my - project
ng serve

ng serve 命令会启动一个本地开发服务器，并监听代码的变化。默认情况下，服务器会在 http://localhost:4200 运行。你可以在浏览器中打开这个地址来查看你的 Angular 应用。当你对项目中的文件进行修改并保存时，开发服务器会自动检测到变化，并重新构建和刷新浏览器，以便你实时看到修改的效果。

你可以通过添加 --open 标志来让 ng serve 命令在启动服务器后自动打开浏览器：

ng serve --open

6. Angular CLI 常用命令

6.1. 创建组件

组件是 Angular 应用的基本构建块。使用 Angular CLI 可以很方便地创建新组件。在项目目录中执行以下命令：

ng generate component my - component

这会在 src/app 目录下创建一个名为 my - component 的新组件，同时生成相关的文件，包括组件的 TypeScript 类文件（.ts）、HTML 模板文件（.html）、CSS 样式文件（.css 或根据你选择的预处理器而定）和测试文件（.spec.ts）。

src/app/
├── my - component/
│   ├── my - component.component.css
│   ├── my - component.component.html
│   ├── my - component.component.spec.ts
│   └── my - component.component.ts
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
└── app.module.ts

6.2. 创建服务

服务用于在应用中共享数据和执行通用操作。要创建一个新服务，可以执行以下命令：

ng generate service my - service

这会在 src/app 目录下创建一个名为 my - service 的服务文件（.ts），并在 app.module.ts 中自动注册该服务。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() {}
}

6.3. 创建模块

模块用于组织和管理 Angular 应用的代码。要创建一个新模块，可以执行以下命令：

ng generate module my - module

这会在 src/app 目录下创建一个名为 my - module 的新模块文件（.ts）。

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  providers: [],
  bootstrap: []
})
export class MyModule {}

6.4. 构建项目

在将应用部署到生产环境之前，需要对项目进行构建。执行以下命令来构建项目：

ng build

这个命令会将项目的源代码编译并打包到 dist 目录下。默认情况下，构建结果是为开发环境优化的。如果要构建用于生产环境的版本，可以添加 --prod 标志：

ng build --prod

--prod 标志会启用一些优化，如压缩代码、移除未使用的代码等，以减小最终包的大小。

6.5. 运行测试

Angular CLI 集成了 Karma 和 Jasmine 用于单元测试，以及 Protractor 用于端到端（E2E）测试。

要运行单元测试，可以执行以下命令：

ng test

这会启动 Karma 测试运行器，并在代码发生变化时自动重新运行测试。

要运行 E2E 测试，首先确保你的应用正在运行（例如通过 ng serve），然后执行以下命令：

ng e2e

这会启动 Protractor 并在浏览器中执行你的 E2E 测试。

7. 项目结构解析

了解 Angular CLI 创建的项目结构对于有效开发非常重要。

• src/app：这个目录包含应用的主要代码，如组件、服务、模块等。每个组件通常有自己的目录，包含相关的 .ts、.html、.css 和 .spec.ts 文件。
• src/environments：这个目录包含不同环境的配置文件，如 environment.ts 用于开发环境，environment.prod.ts 用于生产环境。你可以在这些文件中定义一些与环境相关的变量，如 API 端点。
• src/assets：这个目录用于存放静态资源，如图片、字体等。
• node_modules：这个目录包含项目的所有依赖包，由 npm 安装。
• .angular - cli.json：这是 Angular CLI 的配置文件，你可以在这里配置项目的各种设置，如项目名称、路径、样式等。
• package.json：这个文件列出了项目的依赖包以及一些脚本命令，如 start（对应 ng serve）、build（对应 ng build）等。

8. 配置 Angular CLI

Angular CLI 的配置主要通过 .angular - cli.json 文件进行。以下是一些常见的配置项：

• architect.build：这个部分用于配置构建相关的设置，如输出路径（outputPath）、index 文件（index）、主入口文件（main）等。

"architect": {
  "build": {
    "outputPath": "dist/my - project",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.app.json",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.scss"
    ],
    "scripts": []
  }
}

• architect.serve：这里配置开发服务器的设置，如端口号（port）、代理配置（proxyConfig）等。

"architect": {
  "serve": {
    "builder": "@angular - cli:browser - builder:browser",
    "options": {
      "browserTarget": "my - project:build",
      "port": 4200,
      "proxyConfig": "./proxy.conf.json"
    }
  }
}

如果你需要在开发过程中代理 API 请求到后端服务器，可以创建一个 proxy.conf.json 文件，并在其中配置代理规则：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

这会将所有以 /api 开头的请求代理到 http://localhost:3000。

9. 使用 Angular CLI 进行代码生成的高级选项

在使用 ng generate 命令创建组件、服务、模块等时，有一些高级选项可以使用。

例如，在创建组件时，你可以指定组件的目录结构：

ng generate component my - component --flat=true --module=app.module

--flat=true 表示组件文件将直接生成在 src/app 目录下，而不是创建一个新的 my - component 目录。--module=app.module 表示将组件声明在 app.module.ts 中。

在创建服务时，你可以指定服务的作用域：

ng generate service my - service --module=my - module

这会将服务注册到 my - module 模块中，而不是全局注册。

10. 升级 Angular CLI 和项目依赖

随着 Angular 的不断发展，你可能需要升级 Angular CLI 和项目中的依赖包。

要升级 Angular CLI 到最新版本，可以执行以下命令：

npm install -g @angular/cli

要升级项目中的 Angular 相关依赖包，可以在项目目录中执行：

ng update @angular/cli @angular/core

这个命令会检查并更新 @angular/cli 和 @angular/core 及其相关的依赖包到最新的兼容版本。在升级之前，建议备份你的项目代码，并查看官方文档了解升级可能带来的变化。

11. 常见问题及解决方法

11.1. 安装过程中出现网络问题

如果在安装 Angular CLI 或项目依赖时遇到网络问题，可能是由于网络不稳定或代理设置问题。

• 网络不稳定：尝试切换到更稳定的网络，或者多次重试安装命令。
• 代理设置：如果你的网络需要通过代理访问互联网，你需要配置 npm 的代理设置。可以使用以下命令配置代理：

npm config set proxy http://proxy - server:port
npm config set https - proxy http://proxy - server:port

如果代理需要认证，你还需要设置用户名和密码：

npm config set proxy http://username:password@proxy - server:port
npm config set https - proxy http://username:password@proxy - server:port

要取消代理设置，可以使用以下命令：

npm config delete proxy
npm config delete https - proxy

11.2. 版本兼容性问题

在升级 Angular CLI 或项目依赖时，可能会遇到版本兼容性问题。这通常是因为新的版本引入了不兼容的 API 或变化。

在升级之前，仔细阅读官方的升级指南，了解每个版本的变化和兼容性要求。如果升级后项目出现问题，可以尝试回滚到之前的版本，或者根据错误信息查找解决方案。

11.3. 命令找不到

如果在执行 ng 命令时提示命令找不到，可能是因为 Angular CLI 没有正确安装或没有添加到系统路径中。

确保你已经按照前面的步骤正确安装了 Angular CLI，并且 ~/.npm - global/bin（或你设置的全局安装目录）已经添加到系统的 PATH 环境变量中。如果是在 Windows 系统上，还需要检查是否重启了命令行工具，以使 PATH 环境变量的更改生效。

12. 结合其他工具与 Angular CLI

12.1. 代码格式化

使用 Prettier 可以对 Angular 项目的代码进行格式化，使其风格统一。首先安装 Prettier：

npm install - - save - dev prettier

然后在项目根目录创建一个 .prettierrc 文件，配置 Prettier 的规则，例如：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

你可以将 Prettier 集成到 Angular CLI 中，在 package.json 的 scripts 部分添加以下命令：

"scripts": {
  "format": "prettier --write src/"
}

这样，你就可以通过执行 npm run format 来格式化 src 目录下的所有代码。

12.2. 代码检查

ESLint 是一个常用的 JavaScript 代码检查工具，可以用于检查 Angular 项目中的代码质量。首先安装 ESLint 和相关插件：

npm install - - save - dev eslint eslint - plugin - @angular - eslint eslint - config - @angular - eslint eslint - plugin - @typescript - eslint eslint - config - @typescript - eslint @typescript - eslint/parser

然后在项目根目录创建一个 .eslintrc.json 文件，配置 ESLint 的规则。例如：

{
  "root": true,
  "parser": "@typescript - eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["@angular - eslint", "@typescript - eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@angular - eslint/recommended",
    "plugin:@typescript - eslint/recommended"
  ],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

在 package.json 的 scripts 部分添加代码检查命令：

"scripts": {
  "lint": "eslint src/"
}

执行 npm run lint 可以检查 src 目录下的代码是否符合 ESLint 的规则。

通过以上详细的指南，你应该能够熟练掌握 Angular CLI 的安装与使用，包括创建项目、生成代码、配置项目以及解决常见问题，并结合其他工具提升开发效率和代码质量。