Angular（02）-- Angular-CLI命令

聲明

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

• 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 構建命令等等。

如下是概覽，粗體字是我較爲常接觸的：

命令	別名	說明
generate	g	建立相應的文件，如組件、指令、管道、服務、模塊、路由、實體類等
build	b	編譯項目，並輸出最後的文件到指定目錄，能夠配置不少參數來達到各類效果，好比實時更新等目的
serve	s	編譯項目，並讓它運行起來，且默認支持實時更新修改
new	n	建立新項目，生成項目初始骨架，默認包括根模塊、根視圖，還有基本的各類配置文件
e2e	e	編譯並運行項目，跑起來後，運行 e2e 測試
lint	l	對項目進行 lint 檢查
test	t	運行單元測試
help		查看命令的幫助信息
...	...	還有一些沒用過，也不大清楚的命令，後續再補充

常見命令

其實，這麼多命令中，我最常使用的，就只有 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 配置文件來替換掉默認行爲。

先介紹第一種方式，使用命令時，加上一些選項配置：

選項配置	說明
--export=true|false	生成的組件在對應的模塊文件中，是否自動在 exports 列表中聲明該組件好對外公開，默認值 false。
--flat=true|false	當爲 true 時，生成的組件不自動建立 xxx 的文件夾，直接在當前目錄下建立那幾份文件，默認值 false。
--spec=true|false	當爲 false 時，不自動建立 .spec.ts 文件，默認值爲 true。
--skipTests=true|false	當爲 true 時，不自動建立 .spec.ts 文件，默認值 false。該選項配置是新版纔有，舊版就使用 --spec 配置。
--styleext=css|scss|sass|less|styl	設置組件是否使用預處理器，舊版接口
--style=css|scss|sass|less|styl	設置組件是否使用預處理器，新版接口
--entryComponent=true|false	當爲 true 時，生成的組件自動在其對應的模塊內的 entryComponents 列表中聲明，默認 false。
--inlineStyle=true|false	當爲 true 時，組件使用內聯的 style，不建立對應的 css 文件，默認 false。
--inlineTemplate=true|false	當爲 true 時，組件使用內聯的模板，不建立對應的 html 文件，默認 false。
--lintFix=true|false	當爲 true 時，組件建立後，本身進行 lintFix 操做，默認 false。
--module=module	指定組件歸屬的模塊，默認當前目錄所屬的模塊。
--prefix=prefix	指定組件 selector 取值的前綴，默認 app。
--project=project	指定組件歸屬的 project。
--selector=selector	指定組件的 selector 名。
--skipImport=true|false	當爲 true，生成的組件不在對應的模塊中聲明任何信息，默認 false。
--changeDetection=Default|OnPush	設置改變組件的檢測策略，默認 Default。

以上，是使用 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 命令同樣自動檢測文件變動並增量更新部署，提升開發效率。

選項配置	說明
--watch=true|false	當爲 true 時，會自動檢測文件變動，並同步更新，默認 false

還有其餘配置項，沒使用過，就用過這個，由於咱們是直接前端後端一塊兒作，後端用了 spring boot，因此 Angular 項目使用 ng build 命令編譯輸出到後端項目的容器中，後端跑起來，就能夠直接在本地調試了。

---

你們好，我是 dasu，歡迎關注個人公衆號（dasuAndroidTv），公衆號中有個人聯繫方式，歡迎有事沒事來嘮嗑一下，若是你以爲本篇內容有幫助到你，能夠轉載但記得要關注，要標明原文哦，謝謝支持~