摘要：還有，運行項目時，會使用或命令。指定組件歸屬的。這個是創(chuàng)建服務類的命令，支持的選項配置參考上面幾種命令。當為時，會自動創(chuàng)建對應的路由模塊，默認。目前對該命令的使用，只接觸到默認配置，還不清楚一些選項配置的適用場景，后續(xù)有了解再補充。

聲明

本系列文章內容梳理自以下來源：

• Angular 官方中文版教程

官方的教程，其實已經(jīng)很詳細且易懂，這里再次梳理的目的在于復習和鞏固相關知識點，剛開始接觸學習 Angular 的還是建議以官網(wǎng)為主。

因為這系列文章，更多的會帶有我個人的一些理解和解讀，由于目前我也才剛開始接觸 Angular 不久，在該階段的一些理解并不一定是正確的，擔心會有所誤導，所以還是以官網(wǎng)為主。

正文- Angular-CLI 命令

Angular 的項目其實相比老舊的前端項目模式或者是 Vue 的項目來說，都會比較重一點，因為它包括了： 模塊 @NgModel， 組件 @Component， 指令 @Directive 等各種各樣的東西，而每一種類型的 ts 文件，都需要有一些元數(shù)據(jù)的配置項。

這就導致了，如果是手工創(chuàng)建 ts 文件，需要自己編寫很多重復代碼，因此，可以借助 Angular-CLI 命令來創(chuàng)建這些文件，自動生成所需的這些重復代碼。

而且，不僅在創(chuàng)建文件方面，在對項目的編譯、打包等各種操作中也需要借助 Angular-CLI。

所以，日常開發(fā)中，不管是借助 WebStrom 的圖形操作，還是直接自己使用命令方式，都需要跟 Angular-CLI 打交道，了解一些基本的配置和命令也是有好處的。

安裝的方式就不講了，要么直接使用 WebStrom 內置的，要么借助 npm 下載一個，要么通過 WebStrom 創(chuàng)建的 Angular 項目的 package.json 中就會自動配置一個 cli 依賴庫。

概覽

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

也就是 ng 之后帶相應命令或命令的別名，接著帶命令所需的參數(shù)，如果有多個參數(shù)就緊接著，最后是一些選項配置，選項的格式都加 -- 前綴，如 --spec=false

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

g 是 generate 命令的別名，component 是 g 命令的參數(shù)，表示要創(chuàng)建組件，--flat 和 --spec 是選項配置，具體意思后面說。

Angular-CLI 大體上兩種類型的命令，一是創(chuàng)建或修改文件，二是類似運行某個腳本來編譯、構建項目。

比如創(chuàng)建項目生成初始骨架的命令、創(chuàng)建組件、指令、服務這類文件命令；

或者是執(zhí)行 build 編譯命令，或者是 serve 構建命令等等。

以下是概覽，粗體字是我較為常接觸的：

常見命令

其實，這么多命令中，我最常使用的，就只有 ng g 命令，也就是 generate 命令，用來生成各種類型的文件代碼，比如生成組件、生成服務等。

因為項目開發(fā)過程中，就是在編寫組件，編寫服務，而這些文件又都需要一些元數(shù)據(jù)配置，自己創(chuàng)建 ts 文件再去寫那么代碼有些繁瑣，借助命令比較方便。

還有，運行項目時，會使用 build 或 serve 命令。

所以，下面就只介紹這三個命令，其他命令，等到后續(xù)有接觸，深入了解后再補充。

ng g component

ng g component xxx 是用來創(chuàng)建組件的，直接使用該命令，會默認在當前目錄下創(chuàng)建一個 xxx 文件夾，并在內部創(chuàng)建以下幾個文件：

• 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 的默認配置，當忘記都有哪些命令或參數(shù)，除了可以借助 help 命令或到官網(wǎng)查閱外，也可以到這份文件中查閱。

除了組件外，也還有指令、模塊等命令的默認配置，可以看下其中一項默認配置：

{
    "@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"
            }
        }
    }
}

可以看到，在官網(wǎng)中看到的關于 component 的各個選項配置的信息，其實在這份文件中也全列出來了，每一項配置的值類型，描述，默認值都清清楚楚在文件中了。

ng g directive

這個是創(chuàng)建指令的命令，組件其實是指令的一種，所以，上面介紹的關于組件命令中的各種選項配置，在指令這里也基本都可以使用，這里不列舉了，清楚相關默認文件來源后，不懂的，去翻閱下就可以了。

因為指令并沒有對應的 Template 模板和 CSS 樣式文件，所以，默認生成的文件中，只有 xxx.directive.ts 和 xxx.spec.ts 兩份文件。

ng g pipe

這個是創(chuàng)建管道的命令，它支持的選項配置跟指令的命令基本一樣。

所以，同樣的，它生成的也只有兩份文件，ts 文件和測試文件。

ng g service

這個是創(chuàng)建服務類的命令，支持的選項配置參考上面幾種命令。

默認生成的有兩份文件，ts 和 測試文件。

ng g class/interface/enum

創(chuàng)建實體類，接口，或枚舉的命令，因為這些類型的文件，默認需要的代碼模板并不多，即使不用命令創(chuàng)建，手動創(chuàng)建也行。

ng g module

創(chuàng)建一個模塊，這個命令有幾個比較常用的選項配置：

• --flat=true|false

當為 true 時，在當前目錄下創(chuàng)建指定的 xxx.module.ts 和 xxx-routing.module.ts 文件，默認 false，會自動創(chuàng)建 xxx 的文件夾。

• --routing=true|false

當為 true 時，會自動創(chuàng)建對應的 routing 路由模塊，默認 false。

• --routingScope=Child|Root

創(chuàng)建路由模塊時，配置項是 Child 還是 Root，默認 Child。

以上，是 ng generate 命令的常見用法，它還可以用來創(chuàng)建其他東西，但我常用的就這幾種，而且，很多時候，都不是使用默認的行為，因此常常需要配置選項配置一起使用。

另外，為什么非得用 Angular-CLI 命令來創(chuàng)建文件，用 WebStrom 自己創(chuàng)建個 ts 文件不行嗎？

借助 CLI 工具其實就是為了高效開發(fā)，減少繁瑣的處理，比如，創(chuàng)建一個 xxx.component.ts 文件：

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

@Component({
  selector: "app-cc",
  template: `
    

      cc works!
    
  `,
  styles: []
})
export class CcComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

上面就是執(zhí)行了 ng g component cc --inlineStyle --inlineTemplate 命令后創(chuàng)建的 cc.component.ts 文件的內容，如果不借助 CLI 工具，那么這些代碼就需要自己手動去輸入，即使復制黏貼也比較繁瑣。

ng serve

使用該命令，可以編譯我們的項目，并在本地某個端口上運行該項目，默認還可以做到實時更新修改，不用重新編譯，是本地調試項目常用的命令。

目前對該命令的使用，只接觸到默認配置，還不清楚一些選項配置的適用場景，后續(xù)有了解再補充。

ng build

該命令用來將 Angular 項目編譯、打包輸出到指定目錄下，最終輸出的文件就是些 HTML，CSS，JavaScript 這些瀏覽器能夠識別、運行的文件。

有時候，前端和后端的工作都由同一個人開發(fā)，此時在本地調試時，前端就沒必要造假數(shù)據(jù)，可以直接將 Angular 項目編譯輸出到后端項目的容器中，直接在本地調試后端接口。

那么，這種時候就不能用 ng serve 命令了，只能使用 ng build 命令，但該命令，默認只是編譯項目，那么豈不是每次代碼發(fā)生修改，都得重新跑一次 ng build 命令？當項目有些復雜時，豈不是需要浪費很多時間？

這種時候，就該來了解了解這個命令的一些選項配置了，經(jīng)過配置，它也可以達到類似 ng serve 命令一樣自動檢測文件變更并增量更新部署，提高開發(fā)效率。

還有其他配置項，沒使用過，就用過這個，因為我們是直接前端后端一起做，后端用了 spring boot，所以 Angular 項目使用 ng build 命令編譯輸出到后端項目的容器中，后端跑起來，就可以直接在本地調試了。

大家好，我是 dasu，歡迎關注我的公眾號（dasuAndroidTv），公眾號中有我的聯(lián)系方式，歡迎有事沒事來嘮嗑一下，如果你覺得本篇內容有幫助到你，可以轉載但記得要關注，要標明原文哦，謝謝支持~