聲明
本系列文章內容梳理自以下來源：
官方的教程，其實已經很詳細且易懂，這里再次梳理的目的在於復習和鞏固相關知識點，剛開始接觸學習 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），公眾號中有我的聯系方式，歡迎有事沒事來嘮嗑一下，如果你覺得本篇內容有幫助到你，可以轉載但記得要關注，要標明原文哦，謝謝支持~
