一 Angular CLI 是啥

       Angular CLI 是一个命令行接口(Angular Command Line Interface)，用于实现自动化开发工作流程。能让开发者更容易搭建和运行Angular工程。

Angular CLI 是Angular开发的一个辅助工具。

二 Angular CLI 安装

       安装Angular CLI之前，先得安装Node.js和NPM。

Angular需要Node.js的8.x或10.x版本。一般安装Node.js之后npm也顺带给安装上了。我们可以通过node -v 命令和 npm -v 命令来查看node.js或者npm是否安装。

       在安装了Node.js和npm之后，咱们就可以用如下命令来安装Angular CLI

# window平台上使用如下命令
npm install -g @angular/cli
# mac或者linux平台上使用如下命令
sudo npm install -g angular-cli

       之后可以通过 ng version 命令来验证Angular CLI是否成功安装。

三 Angular CLI 命令

3.1 ng new

ng new <name> [options]
ng n <name> [options]

       ng new命令用于创建一个新的Angular项目。

ng new 会创建目录并且创建Angular项目。

3.2 ng add

ng add <collection> [options]

       
为项目添加对外部库的支持。比如 ng add ng-zorro-antd 命令添加ng-zorro-antd ui框架。

3.3 ng generate

ng generate <schematic> [options]
ng g <schematic> [options]

       根据schematic的设置生成或修改对应的文件。

       ng generate可以生成或者修改多种类型的文件，通过schematic来指定生成或者修改的文件类型。schematic可以设置的类型有：appShell、application、class、component、directive、enum、guard、interface、library、module、pipe、service、serviceWorker、universal。

3.3.1 appShell

ng generate appShell [options]
ng g appShell [options]

       生成用于运行应用程序的服务器端版本的应用程序shell。

3.3.2 application

ng generate application <name> [options]
ng g application <name> [options]

       在当前工作区的“projects”文件夹下生成一个新的Angular应用。

3.3.3 class

ng generate class <name> [options]
ng g class <name> [options]

       在给定或默认项目中创建类。

3.3.4 component

ng generate component <name> [options]
ng g component <name> [options]

       在给定或默认项目中创建组件。

3.3.5 directive

ng generate directive <name> [options]
ng g directive <name> [options]

       在给定或默认项目中创建新的通用指令。

3.3.6 enum

ng generate enum <name> [options]
ng g enum <name> [options]

       为给定或默认项目生成新的通用枚举。

3.3.7 guard

ng generate guard <name> [options]
ng g guard <name> [options]

       
在给定或默认项目中生成新的通用路由守卫定义。

3.3.8 interface

ng generate interface <name> <type> [options]
ng g interface <name> <type> [options]

       在给定或默认项目中创建新的通用接口定义。

3.3.9 library

ng generate library <name> [options]
ng g library <name> [options]

       在当前工作空间中创建新的通用库项目

3.3.10 module

ng generate module <name> [options]
ng g module <name> [options]

       在给定或默认项目中创建新的通用NgModule。

3.3.11 pipe

ng generate pipe <name> [options]
ng g pipe <name> [options]

       在给定或默认项目中创建新的通用管道。

3.3.12 service

ng generate service <name> [options]
ng g service <name> [options]

       在给定或默认项目中创建新的通用服务。

3.3.13 serviceWorker

ng generate serviceWorker [options]
ng g serviceWorker [options]

       将此原理图传递给“run”命令以创建serviceWorker。

serviceWorker是浏览器在后台独立于网页运行的一段脚本。他通过域名标识不同的网页。网页通过注册自己的serviceWorker，可以将一些相对独立的任务丢到serviceWorker里面运行，并最终通过postMessage进行通信。

3.3.14 universal

ng generate universal [options]
ng g universal [options]

       将此原理图传递给“run”命令，为应用程序设置服务器端渲染。

3.4 ng build

ng build <project> [options]
ng b <project> [options]

       
将Angular应用程序编译到给定输出路径中名为dist /的输出目录中。前提是必须在工作空间目录中执行。

       执行ng build命令之后将会做下面几件事情：

• Angular CLI 从 .angular-cli.json 文件中加载配置信息
• Angular CLI 运行 Webpack 打包项目相关的 JavaScript 与 CSS 文件
• 打包后的资源，将被输出到配置文件中 outDir 所指定的目录，默认是输出到 dist 目录

3.5 ng config

ng config <jsonPath> <value> [options]

       
在工作空间的angular.json文件中检索或设置Angular配置值。(查看或者设置angular.json文件中某个配置对应的值)

       ng config的使用我们举一个简单的例子来说明。比如我们有这样的一个angular.json(我们删掉了很多东西)

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "verify-demo": {
      "sourceRoot": "src"
    }
  },
  "defaultProject": "verify-demo"
}

获取 projects.verify-demo.sourceRoot 对应的值

ng config projects.verify-demo.sourceRoot

设置 projects.verify-demo.sourceRoot 对应的值为app

ng config projects.verify-demo.sourceRoot app

3.6 ng doc

ng doc <keyword> [options]
ng d <keyword> [options]

       
在浏览器中打开官方Angular文档（angular.io），并搜索给定的关键字。

3.7 ng e2e

ng e2e <project> [options]
ng e <project> [options]

       构建并提供Angular应用程序，然后使用Protractor运行e2e测试。

必须从工作空间目录中执行。如果未提供项目名称，则将对所有项目执行

3.8 ng help

ng help [options]

       列出可用的命令及其简短描述。

3.9 ng lint

ng lint <project> [options]
ng l <project> [options]

       在给定项目文件夹中的Angular应用程序代码上运行linting工具。

3.10 ng run

ng run <target> [options]

       使用项目中定义的可选自定义构建器配置运行Architect目标。

Architect是CLI用于执行复杂任务（如编译）的工具,根据提供的配置(configurations),CLI命令运行Architect目标，例如build，serve，test和lint。每个命名目标都有一个默认配置，由“options”对象指定，以及“配置”对象中一组可选的命名备用配置。

3.11 ng serve

ng serve <project> [options]
ng s <project> [options]

       构建并运行应用程序，而且在工程里面的文件有改动之后会自动rebuild。

       当执行ng serve命令后，将发生以下几件事情：

• Angular CLI 从 .angular-cli.json 文件中加载配置信息。
• Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件。
• Angular CLI 启动 webpack dev server 本地开发服务器，默认的地址是 localhost:4200。

3.12 ng test

ng test <project> [options]
ng t <project> [options]

       在项目中运行单元测试。

Angular CLI 在新建项目的时候，自动为我们集成了 Karma test runner 测试框架

       运行ng test命令之后，将会执行以下几个动作：

• Angular CLI 从 .angular-cli.json 文件中加载配置信息。
• Angular CLI 基于 .angular-cli.json 文件中的 Karma 相关的配置信息，运行 Karma。Karma 的配置文件默认在根目录下，文件名为 karma.conf.js 。
• Karma 打开配置中设定的浏览器，默认是 Chrome。
  Karma 然后指示浏览器 (Chrome) 使用 Karma 配置中指定的测试框架运行 src/test.ts。默认情况下，采用的是 Jasmine 框架。创建应用程序时，会自动创建 src/test.ts 文件。它预先配置为加载和配置测试Angular 应用程序所需的代码，并运行 src 目录中以 .spec.ts 结尾的所有文件。
• Karma 将测试结果报告给控制台。
• Karma 监听 src 目录下的文件的变化，然后自动运行单元测试。

3.13 ng update

ng update [options]

       更新您的应用程序及其依赖项。参见https://update.angular.io/。

比如可以通过运行以下命令，对核心框架和CLI的v7执行基本更新

ng update @angular/cli @angular/core

有关更新应用程序的详细信息和指导可以参考https://update.angular.io/。

3.14 ng version

ng version [options]
ng v [options]

       输出Angular CLI对应的版本

3.15 ng xi18n

ng xi18n <project> [options]

       从源代码中提取i18n信息。