Angular CLI安装助力项目创建

Angular CLI 简介

Angular CLI（Command - Line Interface）是 Angular 开发团队提供的一个命令行工具，它极大地简化了 Angular 项目的创建、开发、测试和部署流程。对于前端开发者来说，它就像是一个得力助手，能够快速搭建起项目的基本框架，并在开发过程中提供诸多便捷的操作。

Angular CLI 旨在遵循 Angular 官方最佳实践，让开发者能够专注于业务逻辑的实现，而不是花费大量时间在项目的基础配置上。它提供了一系列的命令，涵盖了从初始化项目到生成组件、服务、模块等各种 Angular 应用的构建块。

安装 Angular CLI 的前提条件

在开始安装 Angular CLI 之前，需要确保开发环境满足以下几个条件：

1. 安装 Node.js

Angular CLI 是基于 Node.js 运行的，所以首先要在计算机上安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。

可以从 Node.js 官方网站（https://nodejs.org/）下载适合自己操作系统的安装包进行安装。安装完成后，可以在命令行中输入以下命令来验证 Node.js 是否安装成功：

node -v

该命令会输出版本号，例如 v14.17.0，表明 Node.js 安装成功。

2. 安装 npm

npm（Node Package Manager）是 Node.js 的默认包管理器，随着 Node.js 的安装会一同被安装。npm 用于管理项目中的依赖包，它可以从 npm 仓库下载、安装、更新和删除各种 JavaScript 包。

同样可以在命令行中输入以下命令来验证 npm 是否安装成功：

npm -v

这会输出版本号，如 6.14.13，说明 npm 安装正确。

安装 Angular CLI

当满足上述前提条件后，就可以开始安装 Angular CLI 了。在命令行中执行以下命令：

npm install -g @angular/cli

这里 -g 选项表示全局安装，这样在系统的任何目录下都可以使用 ng 命令（Angular CLI 的命令前缀）。安装过程可能需要一些时间，因为 npm 需要从仓库下载 Angular CLI 及其所有依赖包。

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

ng --version

如果安装成功，会输出类似如下信息：

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

显示了 Angular CLI 的版本、Node.js 版本、包管理器版本以及操作系统信息。

创建 Angular 项目

安装好 Angular CLI 后，就可以使用它来创建一个新的 Angular 项目了。在命令行中进入想要创建项目的目录，例如 D:\projects，然后执行以下命令：

ng new my - first - app

这里 my - first - app 是项目的名称，可以根据自己的需求进行修改。ng new 命令会引导你完成一系列的配置：

1. 选择样式预处理器：Angular CLI 支持多种样式预处理器，如 CSS、SCSS、Less 和 Stylus。可以使用上下箭头键选择需要的预处理器，默认是 CSS。例如，如果选择 SCSS，项目中的样式文件将以 .scss 为后缀。
2. 是否添加 Angular Router：Angular Router 是 Angular 官方的路由模块，用于实现单页应用（SPA）的页面导航功能。如果项目需要路由功能，可以选择 Yes；如果暂时不需要，选择 No。

完成这些配置后，Angular CLI 会开始创建项目。它会生成项目的基本结构，安装项目所需的依赖包，这个过程可能需要几分钟时间，取决于网络速度和计算机性能。

Angular 项目结构

创建好项目后，来看一下项目的基本结构。以 my - first - app 项目为例，其目录结构如下：

my - first - app
├── e2e
│   ├── src
│   │   ├── app.e2e - spec.ts
│   │   ├── app.po.ts
│   │   ├── browser - config.ts
│   │   └── tsconfig.e2e.json
│   └── tsconfig.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.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── .angular - cli.json
├── .editorconfig
├── .gitignore
├── angular.json
├── karma.conf.js
├── package - lock.json
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

1. src 目录

这是项目的主要源代码目录，包含了应用的核心代码。

• app 目录：存放 Angular 应用的组件、模块、服务等。app.component.ts 是应用的根组件，所有其他组件通常都挂载在这个根组件下。app.module.ts 是应用的根模块，用于声明和引导应用。
• assets 目录：用于存放静态资源，如图像、字体、JSON 文件等。
• environments 目录：包含不同环境的配置文件，如 environment.ts 用于开发环境配置，environment.prod.ts 用于生产环境配置。这使得在不同环境下可以方便地切换配置，比如 API 地址等。
• index.html：应用的主 HTML 文件，是应用在浏览器中呈现的入口。它包含一个 <app - root> 标签，Angular 会将根组件渲染到这个标签中。
• main.ts：应用的入口文件，它引导 Angular 应用的启动，并将根模块（AppModule）渲染到 index.html 的 <app - root> 标签中。

2. e2e 目录

用于端到端（End - to - End）测试。e2e 测试是在真实浏览器环境中对应用进行的测试，以确保整个应用流程的正确性。src 目录下的 app.e2e - spec.ts 是一个示例测试文件，可以在此基础上编写针对应用功能的 E2E 测试。

3. node_modules 目录

这个目录包含了项目所依赖的所有 Node.js 包。npm 在安装项目依赖时会将这些包下载到这个目录中。

4. 配置文件

• angular.json：Angular CLI 的主要配置文件，它包含了项目的各种配置信息，如构建、测试、部署等相关的配置。在 Angular 6 及以上版本，该文件取代了原来的 .angular - cli.json。
• package.json：记录了项目的基本信息、依赖包以及一些脚本命令。可以通过 npm install 命令根据这个文件安装项目所需的依赖包。package - lock.json 则精确记录了每个依赖包的版本信息，以确保在不同环境下安装的依赖包版本一致。
• tsconfig.json：TypeScript 的配置文件，用于指定 TypeScript 编译器的编译选项。tsconfig.app.json 和 tsconfig.spec.json 分别用于应用代码和测试代码的 TypeScript 编译配置。
• karma.conf.js：Karma 测试运行器的配置文件，Karma 用于运行单元测试。在 package.json 中配置的 test 脚本会使用 Karma 来执行测试。
• tslint.json：TSLint 是一个用于检查 TypeScript 代码风格的工具，tslint.json 配置了代码检查的规则。

运行 Angular 项目

项目创建完成后，可以在项目目录下执行以下命令来运行项目：

cd my - first - app
ng serve

ng serve 命令会启动一个本地开发服务器，默认监听 http://localhost:4200 地址。浏览器会自动打开并加载应用，如果没有自动打开，可以手动在浏览器中输入 http://localhost:4200 来访问应用。

在开发过程中，ng serve 支持实时重新加载（Live Reload）功能。当对项目中的代码进行修改并保存后，开发服务器会自动检测到变化，并重新编译和刷新浏览器页面，让开发者能够立即看到修改后的效果。

使用 Angular CLI 生成组件

组件是 Angular 应用的基本构建块，用于封装视图和相关的逻辑。Angular CLI 提供了便捷的命令来生成组件。在项目目录下执行以下命令：

ng generate component my - new - component

或者使用简写形式：

ng g c my - new - component

这会在 src/app 目录下生成一个名为 my - new - component 的组件，同时会生成以下几个文件：

• my - new - component.component.ts：组件的 TypeScript 类文件，包含组件的逻辑代码，如属性、方法等。
• my - new - component.component.html：组件的模板文件，用于定义组件的视图结构。
• my - new - component.component.css：组件的样式文件，用于定义组件的样式。
• my - new - component.component.spec.ts：组件的单元测试文件，用于编写对组件的测试用例。

生成的组件类代码示例如下：

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

@Component({
  selector: 'app - my - new - component',
  templateUrl: './my - new - component.component.html',
  styleUrls: ['./my - new - component.component.css']
})
export class MyNewComponentComponent {

}

在 app.module.ts 文件中，Angular CLI 会自动将新生成的组件声明到 declarations 数组中，使其可以在应用中使用。

使用 Angular CLI 生成服务

服务是 Angular 中用于封装可复用业务逻辑的类。例如，数据访问、日志记录等功能都可以封装在服务中。使用以下命令可以生成一个服务：

ng generate service my - new - service

或简写为：

ng g s my - new - service

这会在 src/app 目录下生成一个名为 my - new - service.service.ts 的文件，内容如下：

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

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

  constructor() { }
}

@Injectable 装饰器用于标记该类为一个可注入的服务。providedIn: 'root' 表示该服务在应用的根模块中提供，这是 Angular 6 引入的新语法，使得服务的注册更加简洁。

使用 Angular CLI 生成模块

模块是 Angular 应用的组织单元，它可以将相关的组件、服务、指令等组合在一起。使用以下命令生成一个模块：

ng generate module my - new - module

或简写为：

ng g m my - new - module

这会在 src/app 目录下生成一个名为 my - new - module.module.ts 的文件，示例代码如下：

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

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

在实际应用中，需要在 declarations 数组中声明该模块内的组件、指令，在 imports 数组中导入其他模块，在 exports 数组中导出需要在其他模块中使用的组件、指令等。

使用 Angular CLI 进行构建和部署

当开发完成后，需要将应用构建成适合生产环境部署的版本。在项目目录下执行以下命令进行构建：

ng build

该命令会在项目根目录下生成一个 dist 目录，其中包含了经过编译、压缩和优化后的应用代码。默认情况下，ng build 会构建开发版本，这个版本包含了一些便于调试的信息，但文件体积相对较大。

如果要构建生产版本，可以使用以下命令：

ng build --prod

--prod 标志会启用一系列生产优化，如压缩代码、移除未使用的代码（Tree - shaking）等，以减小文件体积，提高应用的加载速度。

构建完成后，可以将 dist 目录下的内容部署到服务器上。例如，如果使用的是 Apache 服务器，可以将 dist 目录下的文件复制到 Apache 的 htdocs 目录中。对于其他服务器环境，如 Nginx、IIS 等，也有相应的部署方式，但基本思路都是将构建后的静态文件部署到服务器的合适位置，以便用户能够通过浏览器访问应用。

解决 Angular CLI 安装和使用过程中的常见问题

在安装和使用 Angular CLI 的过程中，可能会遇到一些问题，以下是一些常见问题及解决方法：

1. 安装速度慢或失败

如果在安装 Angular CLI 时速度很慢或者安装失败，可能是由于网络问题。可以尝试以下方法：

• 更换 npm 源：默认情况下，npm 从国外的官方仓库下载包，在国内网络环境下可能速度较慢。可以使用淘宝的 npm 镜像源，执行以下命令切换：

npm config set registry https://registry.npm.taobao.org

切换完成后，可以通过 npm config get registry 命令来验证源是否切换成功。

• 使用 yarn：yarn 是另一个 JavaScript 包管理器，它在处理依赖包时有时会比 npm 更稳定和快速。可以先安装 yarn（https://yarnpkg.com/），然后使用 yarn global add @angular/cli 命令来安装 Angular CLI。

2. ng 命令找不到

如果安装完成后，在命令行中执行 ng 命令提示找不到命令，可能是因为安装目录没有添加到系统的环境变量中。对于 Windows 系统，可以按照以下步骤添加：

• 打开“系统属性” -> “高级” -> “环境变量”。
• 在“系统变量”中找到“Path”变量，点击“编辑”。
• 在弹出的窗口中添加 Angular CLI 的安装目录，通常是 C:\Users\你的用户名\AppData\Roaming\npm（如果是全局安装）。
• 保存设置后，重新打开命令行窗口，再次执行 ng --version 应该就可以正常显示版本信息了。

3. 项目构建失败

在使用 ng build 命令构建项目时，如果出现构建失败的情况，首先查看错误信息。常见的错误原因包括：

• 语法错误：检查项目中的 TypeScript、HTML 和 CSS 文件是否存在语法错误。例如，TypeScript 文件中可能存在未定义的变量、函数调用错误等；HTML 文件中可能存在标签不闭合等问题。
• 依赖问题：确保项目的所有依赖包都正确安装并且版本兼容。可以尝试删除 node_modules 目录，然后重新执行 npm install 命令来重新安装依赖包。

通过以上对 Angular CLI 的安装、项目创建、生成各种组件以及常见问题解决的介绍，开发者可以快速上手使用 Angular CLI 来开发高效、高质量的 Angular 前端应用。在实际开发过程中，还可以进一步探索 Angular CLI 的更多功能和配置选项，以满足不同项目的需求。