【2019-11-6】CLI 命令

CLI命令-全部ng *

1、CLI命令語法

一、大多數命令以及少許選項，會有別名，別名會顯示在每一個命令的語法描述中

二、選項名中帶有雙中線前綴 （--），選項別名中帶有單中線前綴（-）。參數沒有前綴，eg

ng build my-app -c production

三、一般，生成的工件（artifact）名稱能夠做爲命令的參數進行指定，也可使用--name選項

四、參數和選項的名稱能夠用小駝峯或中線分割的格式給出。 --myOptionName 等價於 --my-option-name

2、詳細命令結束

一、ng add

--- 給項目添加額外的庫， ng add <Library>,ng add使用軟件包管理器下載新的依賴包並調用安裝腳本，它能夠經過更改配置和添加額外的依賴包(如 polyfills)來更新你的應用

ng add 與 npm install 的區別， for example

①npm install @angular/material --只會安裝包以及更新package.json和package-lock.json文件

②ng add @angular/material：

Step1：安裝包以及更新package.json和package-lock.json文件 //至關於 npm install

Step2：設置 Angular Material 和主題

Step3：更新angular.json //自動將material須要的樣式文件路徑添加到styles

Step4： 更新app/module.ts //增長設置的動畫模塊

Step5：更新index.html //增長鬚要的link連接

Step6：更新styles.css文件 //設置全局樣式

--- 選項

① --defaults = true | false //默認值是false ，當爲true，禁止與用戶交互的輸入提示，直接使用默認值

② --interactive = true | false //默認值是true ，當爲false，禁止與用戶交互的輸入提示，直接使用默認值

③ --registry = registry //使用自已的npm註冊列表

二、ng build

--- 編譯 一個angular app到指定的輸出目錄，必須在工做空間內執行該命令

ng build <project> //若一個工做空間有多個項目，只輸入ng build命令，則只會編譯第一個項目

--- 選項
① --aot = true | false // 是否使用預編譯

②--baseHref=baseHref //應用編譯時使用的base url

③--prod=true|false //默認false , true表示使用生產模式進行編譯

④--watch //當文件發生改變時 ，自動從新編譯

三、ng config

--- 在工做區的angular.json文件中檢索或者設置angular.json

ng config <jsonPath> <value>

① ng config // 查看angular.json配置文件

②ng config <jsonPath> //用jsonPath的語法在angular.json配置文件中進行查看 其key對應的值

③ng config <jsonPath> value // 用jsonPath 的語法查找key， 而後修改key的值爲 value

--- 選項

① --global = true | false //默認是false，當爲true，則訪問調用者主目錄的全局配置

四、ng doc

--- 在瀏覽器打開官方文檔並對關鍵字進行搜索

ng doc <keyword> // keyword是必填項

--- 選項

① --search=true | false // 默認值是false ,當爲true , 在官方文檔全部查找，不然只在API文檔中進行查找

五、ng e2e

--- 編譯和運行一個angular app ,而後使用Protractor進行端到端的測試

ng e / ng e2e // 默認執行工做空間中的全部項目

ng e2e <project> //執行指定的項目

--- 選項

①--host=host //監聽的 host , eg --host=10.132.2.148 , 默認值是localhost

②--port // 用於提供應用程序的端口 , eg 3000 , 默認是4200

③--specs //覆蓋在protractor.conf.js中配置的specs

④--suite=suit // 覆蓋在protractor.conf.js中配置的suit

⑤--webdriverUpdate=true | false // 更新webdriver,默認是true

六、ng generate

基於schematic（原理圖）生成或者更新文件

ng generate <schematic>
ng g <schematic>

--- 選項

① --defaults = true | false //默認值是false ，當爲true，禁止與用戶交互的輸入提示，直接使用默認值

② --interactive = true | false //默認值是true ，當爲false，禁止與用戶交互的輸入提示，直接使用默認值

③ --force=true | false // 默認值爲false，當爲true，強制覆蓋已存在的文件

支持的achematic有：

6-一、appShell // 詳情請參考應用外殼

6-二、application

--- 選項

①--prefix=prefix // 一個前綴加在組件selector, eg : selector: 'app-root' app is a prefix

②--routing=true|false //默認是false

③--skipInstall=true|false //默認是false , 是否跳過安裝依賴包

④----skipPackageJson=true|false //默認是false , 是否給package.json文件添加依賴關係

⑤--skipTests=true|false //默認是false , 是否給app建立測試文件

⑥--style=
css|scss|sass|less|styl // 樣式文件的擴展名 ， 默認是css

6-三、class

給指定或者默認的項目建立class

ng g class tt-yy // Class name is TtYy , file name is tt-yy.ts

ng generate class tt -- type= ff.uu // Class name is Tt , file name is tt.ff.uu.ts

--- 選項

①--project=project // 項目名稱

②--skipTests=true|false // 當爲true, 將不會建立 spec.ts文件

③--type=type //給文件名添加自定義類型，格式最終爲name.type.ts

6-四、component

ng g component XX

給指定或者默認的項目建立組件

--- 選項

①--entryComponent=true|false // 爲true ,則會在ngModule中聲明爲入口組件 , 默認值是false

②--export=true|false //爲true，則ngModule會導出該組件 , 默認值是false

③--flat=true|false //爲true，不會建立以組件命名的文件夾，直接在當前項目的src/app下建立相關文件 , 默認值是false

④--inlineStyle=true|false //爲true, 指定樣式爲內聯樣式，即不會自動生成樣式文件，內聯樣式只支持css格式 , 默認值是false

⑤--inlineTemplate=true|false //爲true, 模板文件在ts文件定義，不會自動生成.html文件 , 默認值是false

⑥--lintFix=true|false //爲true, 在生成組件以後，進行lint修復, 默認值是false

⑦--module=module //聲明指定的NgModule

⑧--prefix=prefix //指定組件選擇器名的前綴字符

⑨--project=project //指定項目名稱

⑩--selector=selector // 給生成點的組件指定選擇器名

⑪--skipImport=true|false // 爲true , 則不會給所屬的NgModule導入此組件 , 默認值是false

⑫--skipTests=true|false // 爲true , 則不會自動生成 spec.ts測試文件, 默認值是false

⑬-style=
css|scss|sass|less|style //指定樣式文件的後綴名，默認是css

6-五、directive

給指定或者默認的項目建立指令

ng g directive XX

--- 選項 // 含義與組件中的選項同樣

①--export=true|false

②--flat=true|false //默認值爲true

③--lintFix=true|false

④--module=module

⑤--prefix=prefix

⑥--project=project

⑦--selector=selector

⑧--skipImport=true|false

⑨--skipTests=true|false

6-六、enum

給指定或者默認的項目建立枚舉值

ng generate enum //建立枚舉值文件 , for example

Step1: ng g enum testcaseType //生成testcase-type.ts文件

export enum TestcaseType {
Feature
Bug
}
Step2：在其餘ts文件中導入此枚舉值： import { TestcaseType } from './use-case-type';

Step3：使用枚舉值：UseCaseType.Feature

--- 選項

①--lintFix=true|false

②--project=project

6-七、guard

給指定或者默認的項目添加路由守衛

ng g guard auth-guard

--- 選項

① --flat=true|false //默認值是 true

②--implements //選擇要建立的守衛接口

③--lintFix=true|false

④--project=project

⑤--skipTests=true|false

6-八、interface

給指定或者默認的項目建立interface

ng g interface tt-yy // interface name is TtYy , file name is tt-yy.ts

ng generate interface tt ff.uu // interface name is Tt , file name is tt.ff.uu.ts

--- 選項

①--project=project // 項目名稱

②--lintFix=true|false

③--prefix=prefix

6-九、library

ng g library XX

在當前工做空間中建立庫

--- 選項

①--entryFile=entryFile // 修改Public API 文件的名字

②--lintFix=true|false

③--prefix=prefix

④--skipInstall=true|false

⑤--skipPackageJson=true|false

⑥--skipTsConfig=true|false //當爲true，不會更新tsConfig.json文件

6-十、module

給指定或者默認的項目建立module

--- 選項

①--flat=true|false //默認值是false

②---lintFix=true|false

③--module=module

// ng g module zd1 --module=zd2 意思是建立zd1模塊，並在zd2模塊中的NgModule中導入zd1

④--project=project

⑤--routing=true|false //默認值是false

⑥--routingScope=Child|Root //默認值是Child

6-十一、pipe

給指定或者默認的項目建立pipe

--- 選項

①--export=true|false //默認值是false

②--flat=true|false //默認值是true

③--module=module

// ng g pipe zd1 --module=zd2 意思是建立zd1 pipe，並在zd2模塊中的NgModule中的declarations 添加zd1

④--project=project

⑤--lintFix=true|false //默認值是false

⑥--skipImport=true|false //默認值是false

⑦ --skipTests=true|false //默認值是false

6-十二、service

給指定或者默認的項目建立service

--- 選項

①--lintFix=true|false //默認值是false

②--flat=true|false //默認值是true

③--skipTests=true|false //默認值是false

④--project=project

6-1三、serviceWorker

6-1四、unbiversal

6-1五、webWorker

七、ng help

ng命令的幫助文檔

ng serve --help

八、ng new

建立一個新的工做空間 和初始的angular app

ng new [Name] // name是新的工做空間和初始項目的名稱

--- 選項

①--skipInstall=true|false //爲true，則不會安裝 依賴庫 dependency packages.

②--commit=true|false

③--createApplication=true|false

④--defaults=true|false

⑤--directory=directory //建立工做空間的目錄

⑥--inlineStyle=true|false

⑦--inlineTemplate=true|false

⑧--interactive=true|false

⑨--newProjectRoot=newProjectRoot // 建立新項目時的路徑(相對於工做空間)，默認是projects ， angular.json文件能夠看到此屬性

⑩--prefix=prefix // 初始app的selector的前綴 ，app.component.ts 默認是app-root

⑪--routing=true|false

⑫--skipTests=true|false // 爲true , 則不會自動生成 spec.ts測試文件, 默認值是false

⑬-style=
css|scss|sass|less|style //指定樣式文件的後綴名，默認是css

九、ng run

ng run kk: build // kk是項目名稱， build是targer 命令

十、ng serve

編譯並運行app, 當文件發生改變，自動進行編譯，重啓項目

ng serve kk

--- 選項

①--host=host //監聽的ip， 默認是localhost

②--open=true|false //默認值是false, 當爲true，會自動打開默認瀏覽器

③--port //監聽的端口，默認是4200

④--watch=true|false //監聽文件變化，從新編譯，默認是true

十一、ng test

執行項目的單元測試

--- 選項

①--codeCoverage=true|false //默認值爲false， 當爲true,輸出代碼覆蓋率

②--watch=true|false

十二、ng update

升級angular版本，以及依賴庫

1三、ng version

輸出angular CLI版本號