Angular（02）AngularCLI命令

声明

本系列文章内容梳理自以下来源：

• Angular 官方中文版教程

官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。

因为这系列文章，更多的会带有我个人的一些理解和解读，由于目前我也才刚开始接触 Angular 不久，在该阶段的一些理解并不一定是正确的，担心会有所误导，所以还是以官网为主。

正文- Angular-CLI 命令

Angular 的项目其实相比老旧的前端项目模式或者是 Vue 的项目来说，都会比较重一点，因为它包括了： 模块 @NgModel， 组件 @Component， 指令 @Directive 等各种各样的东西，而每一种类型的 ts 文件，都需要有一些元数据的配置项。

这就导致了，如果是手工创建 ts 文件，需要自己编写很多重复代码，因此，可以借助 Angular-CLI 命令来创建这些文件，自动生成所需的这些重复代码。

而且，不仅在创建文件方面，在对项目的编译、打包等各种操作中也需要借助 Angular-CLI。

所以，日常开发中，不管是借助 WebStrom 的图形操作，还是直接自己使用命令方式，都需要跟 Angular-CLI 打交道，了解一些基本的配置和命令也是有好处的。

安装的方式就不讲了，要么直接使用 WebStrom 内置的，要么借助 npm 下载一个，要么通过 WebStrom 创建的 Angular 项目的 package.json 中就会自动配置一个 cli 依赖库。

概览

命令格式：ng commandNameOrAlias arg [optionalArg] [options]

也就是 ng 之后带相应命令或命令的别名，接着带命令所需的参数，如果有多个参数就紧接着，最后是一些选项配置，选项的格式都加 -- 前缀，如 --spec=false

示例：ng g component –flat –spec=false

g 是 generate 命令的别名，component 是 g 命令的参数，表示要创建组件，–flat 和 –spec 是选项配置，具体意思后面说。

Angular-CLI 大体上两种类型的命令，一是创建或修改文件，二是类似运行某个脚本来编译、构建项目。

比如创建项目生成初始骨架的命令、创建组件、指令、服务这类文件命令；

或者是执行 build 编译命令，或者是 serve 构建命令等等。

以下是概览，粗体字是我较为常接触的：

常见命令

其实，这么多命令中，我最常使用的，就只有 ng g 命令，也就是 generate 命令，用来生成各种类型的文件代码，比如生成组件、生成服务等。

因为项目开发过程中，就是在编写组件，编写服务，而这些文件又都需要一些元数据配置，自己创建 ts 文件再去写那么代码有些繁琐，借助命令比较方便。

还有，运行项目时，会使用 build 或 serve 命令。

所以，下面就只介绍这三个命令，其他命令，等到后续有接触，深入了解后再补充。

ng g component

ng g component xxx 是用来创建组件的，直接使用该命令，会默认在当前目录下创建一个 xxx 文件夹，并在内部创建以下几个文件：

• xxx.component.css
• xxx.component.html
• xxx.component.spec.ts
• xxx.component.ts

每个文件内都会自动生成一些所需的代码，另外，还会在当前目录所属的模块文件中，将该 xxxComponent 组件声明在相应的 declarations 列表中。

以上是命令的默认行为，如果要改变这个默认行为，有两种方式，一是使用命令时携带一些选项配置，二是直接修改 angular.json 配置文件来替换掉默认行为。

先介绍第一种方式，使用命令时，加上一些选项配置：

以上，是使用 ng g component 命令时，可以携带的一些选项配置，来修改默认的行为，其中，如果选项配置为 true，那么 value 值可以省略，如 --flat=true 可以简写成 --flat。

比如：ng g component xxx --flat --inlineStyle --inlineTemplate --spec=false --export

另外，其实这些选项配置中，除了前面几项可能比较常用外，其他的我基本都还没怎么接触过。

下面，讲讲第二种方式，修改 angular.json 配置文件来修改默认行为：

也就是在 projects 里选择当前项目，然后再其 schematics 下进行配置，至于 @schematics/angular:component 这串怎么来的，可以去开头第一行所指的那份 schema.json 文件中查找。

其实，这份 schema.json 文件，就是 Angular-CLI 的默认配置，当忘记都有哪些命令或参数，除了可以借助 help 命令或到官网查阅外，也可以到这份文件中查阅。

除了组件外，也还有指令、模块等命令的默认配置，可以看下其中一项默认配置：

{
    "@schematics/angular:component": {
        "type": "object",
        "properties": {
            "changeDetection": {
                "description": "Specifies the change detection strategy.",
                "enum": [
                    "Default",
                    "OnPush"
                ],
                "type": "string",
                "default": "Default",
                "alias": "c"
            },
            "entryComponent": {
                "type": "boolean",
                "default": false,
                "description": "Specifies if the component is an entry component of declaring module."
            },
            "export": {
                "type": "boolean",
                "default": false,
                "description": "Specifies if declaring module exports the component."
            },
            "flat": {
                "type": "boolean",
                "description": "Flag to indicate if a directory is created.",
                "default": false
            },
            "inlineStyle": {
                "description": "Specifies if the style will be in the ts file.",
                "type": "boolean",
                "default": false,
                "alias": "s"
            },
            "inlineTemplate": {
                "description": "Specifies if the template will be in the ts file.",
                "type": "boolean",
                "default": false,
                "alias": "t"
            },
            "module": {
                "type": "string",
                "description": "Allows specification of the declaring module.",
                "alias": "m"
            },
            "prefix": {
                "type": "string",
                "format": "html-selector",
                "description": "The prefix to apply to generated selectors.",
                "alias": "p"
            },
            "selector": {
                "type": "string",
                "format": "html-selector",
                "description": "The selector to use for the component."
            },
            "skipImport": {
                "type": "boolean",
                "description": "Flag to skip the module import.",
                "default": false
            },
            "spec": {
                "type": "boolean",
                "description": "Specifies if a spec file is generated.",
                "default": true
            },
            "styleext": {
                "description": "The file extension to be used for style files.",
                "type": "string",
                "default": "css"
            },
            "viewEncapsulation": {
                "description": "Specifies the view encapsulation strategy.",
                "enum": [
                    "Emulated",
                    "Native",
                    "None",
                    "ShadowDom"
                ],
                "type": "string",
                "alias": "v"
            }
        }
    }
}

可以看到，在官网中看到的关于 component 的各个选项配置的信息，其实在这份文件中也全列出来了，每一项配置的值类型，描述，默认值都清清楚楚在文件中了。

ng g directive

这个是创建指令的命令，组件其实是指令的一种，所以，上面介绍的关于组件命令中的各种选项配置，在指令这里也基本都可以使用，这里不列举了，清楚相关默认文件来源后，不懂的，去翻阅下就可以了。

因为指令并没有对应的 Template 模板和 CSS 样式文件，所以，默认生成的文件中，只有 xxx.directive.ts 和 xxx.spec.ts 两份文件。

ng g pipe

这个是创建管道的命令，它支持的选项配置跟指令的命令基本一样。

所以，同样的，它生成的也只有两份文件，ts 文件和测试文件。

ng g service

这个是创建服务类的命令，支持的选项配置参考上面几种命令。

默认生成的有两份文件，ts 和 测试文件。

ng g class/interface/enum

创建实体类，接口，或枚举的命令，因为这些类型的文件，默认需要的代码模板并不多，即使不用命令创建，手动创建也行。

ng g module

创建一个模块，这个命令有几个比较常用的选项配置：

• –flat=true|false

当为 true 时，在当前目录下创建指定的 xxx.module.ts 和 xxx-routing.module.ts 文件，默认 false，会自动创建 xxx 的文件夹。

• –routing=true|false

当为 true 时，会自动创建对应的 routing 路由模块，默认 false。

• –routingScope=Child|Root

创建路由模块时，配置项是 Child 还是 Root，默认 Child。

以上，是 ng generate 命令的常见用法，它还可以用来创建其他东西，但我常用的就这几种，而且，很多时候，都不是使用默认的行为，因此常常需要配置选项配置一起使用。

另外，为什么非得用 Angular-CLI 命令来创建文件，用 WebStrom 自己创建个 ts 文件不行吗？

借助 CLI 工具其实就是为了高效开发，减少繁琐的处理，比如，创建一个 xxx.component.ts 文件：

import { Component, OnInit } from \'@angular/core\';

@Component({
  selector: \'app-cc\',
  template: `
    <p>
      cc works!
    </p>
  `,
  styles: []
})
export class CcComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

上面就是执行了 ng g component cc --inlineStyle --inlineTemplate 命令后创建的 cc.component.ts 文件的内容，如果不借助 CLI 工具，那么这些代码就需要自己手动去输入，即使复制黏贴也比较繁琐。

ng serve

使用该命令，可以编译我们的项目，并在本地某个端口上运行该项目，默认还可以做到实时更新修改，不用重新编译，是本地调试项目常用的命令。

目前对该命令的使用，只接触到默认配置，还不清楚一些选项配置的适用场景，后续有了解再补充。

ng build

该命令用来将 Angular 项目编译、打包输出到指定目录下，最终输出的文件就是些 HTML，CSS，JavaScript 这些浏览器能够识别、运行的文件。

有时候，前端和后端的工作都由同一个人开发，此时在本地调试时，前端就没必要造假数据，可以直接将 Angular 项目编译输出到后端项目的容器中，直接在本地调试后端接口。

那么，这种时候就不能用 ng serve 命令了，只能使用 ng build 命令，但该命令，默认只是编译项目，那么岂不是每次代码发生修改，都得重新跑一次 ng build 命令？当项目有些复杂时，岂不是需要浪费很多时间？

这种时候，就该来了解了解这个命令的一些选项配置了，经过配置，它也可以达到类似 ng serve 命令一样自动检测文件变更并增量更新部署，提高开发效率。

还有其他配置项，没使用过，就用过这个，因为我们是直接前端后端一起做，后端用了 spring boot，所以 Angular 项目使用 ng build 命令编译输出到后端项目的容器中，后端跑起来，就可以直接在本地调试了。

大家好，我是 dasu，欢迎关注我的公众号（dasuAndroidTv），公众号中有我的联系方式，欢迎有事没事来唠嗑一下，如果你觉得本篇内容有帮助到你，可以转载但记得要关注，要标明原文哦，谢谢支持~

原文链接：https://www.cnblogs.com/dasusu/p/10521728.html
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。