Angular CLI

一 Angular CLI 是啥

? ? ? ?Angular CLI 是一個命令行接口(Angular Command Line Interface)集惋,用于實現(xiàn)自動化開發(fā)工作流程桨螺。能讓開發(fā)者更容易搭建和運行Angular工程。

Angular CLI 是Angular開發(fā)的一個輔助工具。

二 Angular CLI 安裝

? ? ? ?安裝Angular CLI之前统刮,先得安裝Node.js和NPM。

Angular需要Node.js的8.x或10.x版本账千。一般安裝Node.js之后npm也順帶給安裝上了侥蒙。我們可以通過node -v 命令和 npm -v 命令來查看node.js或者npm是否安裝。

? ? ? ?在安裝了Node.js和npm之后匀奏,咱們就可以用如下命令來安裝Angular CLI

# window平臺上使用如下命令
npm install -g @angular/cli
# mac或者linux平臺上使用如下命令
sudo npm install -g angular-cli

? ? ? ?之后可以通過 ng version 命令來驗證Angular CLI是否成功安裝鞭衩。

三 Angular CLI 命令

3.1 ng new

ng new <name> [options]
ng n <name> [options]

? ? ? ?ng new命令用于創(chuàng)建一個新的Angular項目。

ng new 會創(chuàng)建目錄并且創(chuàng)建Angular項目。

參數(shù) 說明
<name> 目錄名稱和初始Angular項目的名稱
選項 說明
--collection=collection 別名:-c论衍。用于生成初始應用程序的外部庫瑞佩,比如ng-zorro-antd
--commit=true|false 默認值:true。初始git存儲庫提交信息
--createApplication=true|false 默認值:true坯台。如果為true炬丸,則在新工作空間的src文件夾中創(chuàng)建一個新的初始應用程序項目。如果為false蜒蕾,則創(chuàng)建一個沒有初始應用程序的空工作區(qū)稠炬。然后,您可以使用ng generate application命令咪啡,以便在projects文件夾中創(chuàng)建所有應用程序
--defaults=true|false 如果為true首启。則禁用具有默認選項的交互式輸入提示
--directory=directory 用于創(chuàng)建工作空間的目錄名稱
--dryRun=true|false 默認值:false,別名:-d。如果為true撤摸,則運行并報告活動而不寫出結(jié)果
--experimentalIvy=true|false 默認值:false毅桃。如果為true,則創(chuàng)建一個使用Ivy渲染引擎的新應用程序
--force=true|false 默認值:false,別名:-f愁溜。是否覆蓋現(xiàn)有文件
--help=true|false|json|JSON 默認值:false疾嗅。在控制臺中顯示此命令的幫助消息
--inlineStyle=true|false 默認值:false,別名:-s外厂。如果為true冕象,則在組件TS文件中包含內(nèi)聯(lián)樣式。默認情況下汁蝶,在組件TS文件中創(chuàng)建并引用外部樣式文件
--inlineTemplate=true|false 默認值:false,別名:-t欣鳖。如果為true时肿,則在組件TS文件中包含模板內(nèi)聯(lián)。默認情況下,在組件TS文件中創(chuàng)建并引用外部模板文件
--interactive=true|false 如果為false猜煮。則禁用交互式輸入提示
--minimal=true|false 默認值:false。如果為true琳疏,則創(chuàng)建一個沒有任何測試框架的項目
--newProjectRoot=newProjectRoot 默認值:projects洒琢。相對于新工作區(qū)根目錄,將創(chuàng)建新項目的路徑
--prefix=prefix 默認值:app,別名:-p帕棉。要應用于初始項目的生成選擇器的前綴
--routing=true|false 默認值:false针肥。如果為true,則為初始項目生成路由模塊
--skipGit=true|false 默認值:false,別名:-g香伴。如果為true慰枕,則不初始化git存儲庫
--skipInstall=true|false 默認值:false。如果為true即纲,則不安裝依賴包
--skipTests=true|false 默認值:false,別名:-S具帮。如果為true,則不會為新項目生成“spec.ts”測試文件
--style=css|scss|sass|less|styl 默認值:css。用于樣式文件的文件擴展名或預處理器
--verbose=true|false 默認值:false,別名:-v蜂厅。如果為true匪凡,則向輸出日志記錄添加更多詳細信息
--viewEncapsulation=Emulated|Native|None|ShadowDom 在初始項目中使用的視圖封裝策略

3.2 ng add

ng add <collection> [options]

? ? ? ?
為項目添加對外部庫的支持。比如 ng add ng-zorro-antd 命令添加ng-zorro-antd ui框架掘猿。

參數(shù) 說明
<collection> 要添加的包锹雏,外部庫
選項 說明
--defaults=true|false 如果為true。則禁用具有默認選項的交互式輸入提示
--help=true|false|json|JSON 默認值:false术奖。在控制臺中顯示此命令的幫助消息
--interactive=true|false 如果為false礁遵。則禁用交互式輸入提示

3.3 ng generate

ng generate <schematic> [options]
ng g <schematic> [options]

? ? ? ?根據(jù)schematic的設置生成或修改對應的文件。

參數(shù) 說明
<schematic> 描述我們要生成的對象是啥
選項 說明
--defaults=true|false 如果為true采记,則禁用具有默認選項的交互式輸入提示
--dryRun=true|false 默認值:false,別名:-d佣耐。如果為true,則運行并報告活動而不寫出結(jié)果
--force=true|false 默認值:false,別名:-f唧龄。如果為true兼砖,則強制覆蓋現(xiàn)有文件
--help=true|false|json|JSON 默認值:false。在控制臺中顯示此命令的幫助消息
--interactive=true|false 如果為false既棺,則禁用交互式輸入提示

? ? ? ?ng generate可以生成或者修改多種類型的文件讽挟,通過schematic來指定生成或者修改的文件類型。schematic可以設置的類型有:appShell丸冕、application耽梅、class、component胖烛、directive眼姐、enum、guard佩番、interface众旗、library、module趟畏、pipe贡歧、service、serviceWorker赋秀、universal利朵。

3.3.1 appShell

ng generate appShell [options]
ng g appShell [options]

? ? ? ?生成用于運行應用程序的服務器端版本的應用程序shell。

選項 說明
--appDir=appDir 默認值:app沃琅。應用程序目錄的名稱
--appId=appId 默認值:serverApp哗咆。要在withServerTransition()中使用的應用程序ID
--clientProject=clientProject 相關(guān)客戶端應用程序的名稱
--index=index 默認值:index.html。index文件的名字
--main=main 默認值:main.server.ts益眉。主入口點文件的名稱
--name=name 通用應用程序的HTML選擇器
--outDir=outDir 默認值:dist-server晌柬。構(gòu)建結(jié)果的輸出目錄
--root=root 默認值:src姥份。應用程序的根目錄
--rootModuleClassName=rootModuleClassName 默認值:AppServerModule。根模塊類的名稱
--rootModuleFileName=rootModuleFileName 默認值:app.server.module.ts年碘。根模塊文件的名稱
--route=route 默認值:shell澈歉。用于生成app shell的路徑路徑
--sourceDir=sourceDir 默認值:src,別名:-D。源目錄的路徑
--test=test 測試入口點文件的名稱
--testTsconfigFileName=testTsconfigFileName 默認值:tsconfig.spec屿衅。測試的TypeScript配置文件的名稱
--tsconfigFileName=tsconfigFileName 默認值:tsconfig.server埃难。TypeScript配置文件的名稱
--universalProject=universalProject 相關(guān)通用應用程序的名稱

3.3.2 application

ng generate application <name> [options]
ng g application <name> [options]

? ? ? ?在當前工作區(qū)的“projects”文件夾下生成一個新的Angular應用。

參數(shù) 說明
<name> 新app的名稱
選項 說明
--experimentalIvy=true|false 默認值: false涤久。如果為True涡尘,則創(chuàng)建一個使用Ivy渲染引擎的新應用
--inlineStyle=true|false 默認值:false,別名:-s。 如果為true响迂,則在根component.ts文件中包含內(nèi)聯(lián)樣式考抄。只能嵌入CSS樣式。默認值為false蔗彤,表示在根component.ts文件中創(chuàng)建并引用外部樣式文件
--inlineTemplate=true|false 默認值:false,別名:-t川梅。如果為true,則在根component.ts文件中包含內(nèi)聯(lián)模板然遏。默認值為false贫途,表示在根component.ts文件中創(chuàng)建并引用外部模板文件
--lintFix=true|false 默認值:false。如果為true待侵,則在生成應用程序后應用lint修復
--minimal=true|false 默認值: false丢早。如果為true,則創(chuàng)建一個沒有任何測試框架的簡單項目
--prefix=prefix 默認值: app诫给,別名: -p香拉。應用于生成的選擇器的前綴
--routing=true|false 默認值:false。如果為true中狂,則創(chuàng)建路由NgModule
--skipInstall=true|false 默認值:false。跳過安裝依賴包
--skipPackageJson=true|false 默認值: false扑毡。如果為true胃榕,則不會向“package.json”文件添加依賴項
--skipTests=true|false 默認值: false,別名: -S。如果為true瞄摊,則不會為應用程序創(chuàng)建“spec.ts”測試文件
--style=css|scss|sass|less|styl 默認值: css勋又。用于樣式文件的文件擴展名或預處理器
--viewEncapsulation=Emulated|Native|None|ShadowDom 要在新應用中使用的視圖封裝策略

3.3.3 class

ng generate class <name> [options]
ng g class <name> [options]

? ? ? ?在給定或默認項目中創(chuàng)建類。

參數(shù) 說明
<name> 類名字
選項 說明
--lintFix=true|false 默認值:false换帜。如果為true楔壤,則在生成類后應用lint修復
--project=project 項目名稱
--skipTests=true|false 默認值:false。如果為true惯驼,則不會為新類創(chuàng)建“spec.ts”測試文件
--type=type 將開發(fā)人員定義的類型添加到文件名中蹲嚣,格式為“name.type.ts”

3.3.4 component

ng generate component <name> [options]
ng g component <name> [options]

? ? ? ?在給定或默認項目中創(chuàng)建組件递瑰。

參數(shù) 說明
<name> 組件名字
選項 說明
--changeDetection=Default|OnPush 默認值:Default,別名:-c。要在新組件中使用的更改檢測策略
--entryComponent=true|false 默認值:false隙畜。如果為true抖部,則新組件是聲明NgModule的入口組件
--export=true|false 默認值:false。如果為true议惰,則聲明NgModule導出此組件
--flat=true|false 默認值:false慎颗。如果為true,則在當前項目的頂級創(chuàng)建新文件
--inlineStyle=true|false 默認值:false言询,別名:-s俯萎。如果為true,則在component.ts文件中包含內(nèi)聯(lián)樣式运杭。只能嵌入CSS樣式讯屈。默認情況下,在component.ts文件中創(chuàng)建并引用外部樣式文件
--inlineTemplate=true|false 默認值:false县习,別名:-t涮母。如果為true,則在component.ts文件中包含內(nèi)聯(lián)模板躁愿。默認情況下叛本,會在component.ts文件中創(chuàng)建并引用外部模板文件
--lintFix=true|false 默認值:false。如果為true彤钟,則在生成組件后應用lint修復
--module=module 別名:-m来候。聲明NgModule
--prefix=prefix 別名:-p。要應用于生成的組件選擇器的前綴
--project=project 項目名稱
--selector=selector 用于此組件的HTML選擇器
--skipImport=true|false 默認值:false逸雹。如果為true营搅,則不會將此組件導入到擁有的NgModule中
--skipTests=true|false 默認值:false。如果為true梆砸,則不會為新組件創(chuàng)建“spec.ts”測試文件
--style=css|scss|sass|less|styl 默認值:css.用于樣式文件的文件擴展名或預處理器
--viewEncapsulation=Emulated|Native|None|ShadowDom 別名:-v.要在新組件中使用的視圖封裝策略

3.3.5 directive

ng generate directive <name> [options]
ng g directive <name> [options]

? ? ? ?在給定或默認項目中創(chuàng)建新的通用指令转质。

參數(shù) 說明
<name> 指令名字
選項 說明
--export=true|false 默認值:false。如果為true帖世,則聲明NgModule會導出此指令
--flat=true|false 默認值:true休蟹。如果為true,則在當前項目的頂級創(chuàng)建新文件
--lintFix=true|false 默認值:false.如果為true日矫,則在生成指令后應用lint修復
--module=module 別名:-m.聲明NgModule
--prefix=prefix 別名:-p.要應用于生成的選擇器的前綴
--project=project 項目名稱
--selector=selector 用于此指令的HTML選擇器
--skipImport=true|false 默認值:false赂弓。如果為true,則不會將此指令導入到擁有的NgModule中
--skipTests=true|false 默認值:false哪轿。如果為true盈魁,則不會為新類創(chuàng)建“spec.ts”測試文件

3.3.6 enum

ng generate enum <name> [options]
ng g enum <name> [options]

? ? ? ?為給定或默認項目生成新的通用枚舉。

參數(shù) 名字
<name> 枚舉enum名字
選項 名字
--lintFix=true|false 默認值:false.如果為true窃诉,則在生成枚舉后應用lint修復
--project=project 要在其中創(chuàng)建枚舉的項目的名稱杨耙。默認值是工作區(qū)的已配置默認項目

3.3.7 guard

ng generate guard <name> [options]
ng g guard <name> [options]

? ? ? ?
在給定或默認項目中生成新的通用路由守衛(wèi)定義赤套。

參數(shù) 說明
<name> 路由守衛(wèi)的名字
選項 說明
--flat=true|false 默認值:true。如果為true按脚,則在當前項目的頂級創(chuàng)建新文件
--implements 指定要實現(xiàn)的接口
--lintFix=true|false 默認值:false.如果為true于毙,則在生成路由守衛(wèi)后應用lint修復
--project=project 項目名稱
--skipTests=true|false 默認值:false。如果為true辅搬,則不會為路由守衛(wèi)創(chuàng)建“spec.ts”測試文件

3.3.8 interface

ng generate interface <name> <type> [options]
ng g interface <name> <type> [options]

? ? ? ?在給定或默認項目中創(chuàng)建新的通用接口定義唯沮。

參數(shù) 說明
<name> 接口名字
<type> 將開發(fā)人員定義的類型添加到文件名中,格式為“name.type.ts”
選項 說明
--lintFix=true|false 默認值:false堪遂。如果為true介蛉,則在生成接口后應用lint修復
--project=project 項目名字

3.3.9 library

ng generate library <name> [options]
ng g library <name> [options]

? ? ? ?在當前工作空間中創(chuàng)建新的通用庫項目

參數(shù) 說明
<name> 庫的名稱
選項 說明
--entryFile=entryFile 默認值:public_api。相對于工作空間根目錄創(chuàng)建庫的公共API文件的路徑
--lintFix=true|false 默認值:false溶褪。如果為true币旧,則在生成庫后應用lint修復
--prefix=prefix 默認值:lib,別名:-p猿妈。要應用于生成的選擇器的前綴
--skipInstall=true|false 默認值:false吹菱。如果為true,則不安裝依賴包
--skipPackageJson=true|false 默認值:false彭则。如果為true鳍刷,則不會向“package.json”文件添加依賴項
--skipTsConfig=true|false 默認值:false。如果為true俯抖,則不更新“tsconfig.json”以添加新庫的路徑映射输瓜。在應用程序中使用庫需要路徑映射,但可以在此處禁用以簡化開發(fā)

3.3.10 module

ng generate module <name> [options]
ng g module <name> [options]

? ? ? ?在給定或默認項目中創(chuàng)建新的通用NgModule芬萍。

參數(shù) 說明
<name> NgModule對應的名字
選項 說明
--flat=true|false 默認值:false尤揣。如果為true,則在當前項目根目錄的頂級創(chuàng)建新文件
--lintFix=true|false 默認值:false柬祠。如果為true北戏,則在生成模塊后應用lint修復
--module=module 別名:-m。聲明NgModule
--project=project 項目名稱
--routing=true|false 默認值:false瓶盛。如果為true最欠,則創(chuàng)建路由模塊
--routingScope=Child|Root 默認值:Child。新路由模塊的作用范圍

3.3.11 pipe

ng generate pipe <name> [options]
ng g pipe <name> [options]

? ? ? ?在給定或默認項目中創(chuàng)建新的通用管道惩猫。

參數(shù) 說明
<name> 管道對應的名字
選項 說明
--export=true|false 默認值:false。如果為true蚜点,則聲明NgModule導出此管道
--flat=true|false 默認值: true轧房。如果為true,則在項目的頂級創(chuàng)建文件
--lintFix=true|false 默認值:false绍绘。如果為true奶镶,則在生成管道后應用lint修正
--module=module 別名:-m.聲明NgModule
--project=project 項目名字
--skipImport=true|false 默認值:false迟赃。如果為true,則不會將此管道導入到擁有的NgModule中
--skipTests=true|false 默認值:false厂镇。如果為true纤壁,則不會為新管道創(chuàng)建“spec.ts”測試文件

3.3.12 service

ng generate service <name> [options]
ng g service <name> [options]

? ? ? ?在給定或默認項目中創(chuàng)建新的通用服務。

參數(shù) 說明
<name> 通用服務對應的名字
選項 說明
--flat=true|false 默認值:true捺信。如果為true酌媒,則在項目的頂級創(chuàng)建文件
--lintFix=true|false 默認值:false。如果為true迄靠,則在生成管道后應用lint修正
--project=project 項目名稱
--skipTests=true|false 默認值:false秒咨。如果為true,則不會為新服務創(chuàng)建“spec.ts”測試文件

3.3.13 serviceWorker

ng generate serviceWorker [options]
ng g serviceWorker [options]

? ? ? ?將此原理圖傳遞給“run”命令以創(chuàng)建serviceWorker掌挚。

serviceWorker是瀏覽器在后臺獨立于網(wǎng)頁運行的一段腳本雨席。他通過域名標識不同的網(wǎng)頁。網(wǎng)頁通過注冊自己的serviceWorker吠式,可以將一些相對獨立的任務丟到serviceWorker里面運行陡厘,并最終通過postMessage進行通信。

選項 說明
--configuration=configuration 默認值:production特占。應用服務工作者的配置
--project=project 項目名稱
--target=target 默認值:build糙置。應用服務工作者的目標

3.3.14 universal

ng generate universal [options]
ng g universal [options]

? ? ? ?將此原理圖傳遞給“run”命令,為應用程序設置服務器端渲染摩钙。

選項 說明
--appDir=appDir 默認值:app罢低。應用程序文件夾的名稱
--appId=appId 默認值:serverApp。用于轉(zhuǎn)換的應用程序標識符
--clientProject=clientProject 相關(guān)客戶端應用程序的名稱胖笛。需要代替“項目”
--main=main 默認值:main.server.ts网持。主入口點文件的名稱
--rootModuleClassName=rootModuleClassName 默認值:AppServerModule。根NgModule類的名稱
--rootModuleFileName=rootModuleFileName 默認值:app.server.module.ts长踊。根NgModule文件的名稱
--skipInstall=true|false 默認值:false功舀。如果為true,則不安裝依賴項的包
--test=test 測試入口點文件的名稱
--testTsconfigFileName=testTsconfigFileName 默認值:tsconfig.spec身弊。測試的TypeScript配置文件的名稱
--tsconfigFileName=tsconfigFileName 默認值:tsconfig.server辟汰。TypeScript配置文件的名稱

3.4 ng build

ng build <project> [options]
ng b <project> [options]

? ? ? ?
將Angular應用程序編譯到給定輸出路徑中名為dist /的輸出目錄中。前提是必須在工作空間目錄中執(zhí)行阱佛。

? ? ? ?執(zhí)行ng build命令之后將會做下面幾件事情:

  • Angular CLI 從 .angular-cli.json 文件中加載配置信息
  • Angular CLI 運行 Webpack 打包項目相關(guān)的 JavaScript 與 CSS 文件
  • 打包后的資源帖汞,將被輸出到配置文件中 outDir 所指定的目錄,默認是輸出到 dist 目錄
參數(shù) 說明
<project> 要構(gòu)建的項目的名稱凑术◆嬲海可以是應用程序或庫
選項 說明
--aot=true|false 默認值:false。是否使用AOT編譯淮逊。AOT(預編譯)催首;JIT(即使編譯)
--baseHref=baseHref 設置 index.html 文件中 <base> 元素的鏈接地址
--buildEventLog=buildEventLog 構(gòu)建事件協(xié)議事件的輸出文件路徑
--buildOptimizer=true|false 默認值:false扶踊。使用'aot'選項時,啟用'@ angular-devkit / build-optimizer'優(yōu)化
--commonChunk=true|false 默認值:true郎任。使用包含跨多個包使用的代碼的單獨包
--configuration=configuration 別名:-c秧耗。指定構(gòu)建目標,在angular.json的“configurations”部分中指定舶治。每個目標都附帶該目標的選項默認配置
--deleteOutputPath=true|false 默認值:true分井。在構(gòu)建之前刪除輸出路徑
--deployUrl=deployUrl 將部署文件的URL
--es5BrowserSupport=true|false 默認值:false。啟用有條件加載的ES2015 polyfill歼疮。
--extractCss=true|false 默認值:false杂抽。將全局樣式中的css提取為css文件而不是js文件
--extractLicenses=true|false 默認值:false。在單獨的文件中提取所有許可證
--forkTypeChecker=true|false 默認值:true韩脏。在fork進程中運行TypeScript類型檢查器
--help=true|false|json|JSON 默認值:false缩麸。在控制臺中顯示此命令的幫助消息
--i18nFile=i18nFile 用于i18n的本地化文件
--i18nFormat=i18nFormat 使用--i18n-file指定的本地化文件的格式
--i18nLocale=i18nLocale 用于i18n的語言環(huán)境
--i18nMissingTranslation=i18nMissingTranslation 如何處理i18n的缺失翻譯
--index=index index HTML 文件對應的名字
--lazyModules 將延遲加載的NgModule文件列表。將自動發(fā)現(xiàn)延遲路由器模塊
--main=main 相對于當前工作空間的應用程序主入口點的完整路徑
--namedChunks=true|false 默認值:true赡矢。使用延遲加載的塊的文件名
--ngswConfigPath=ngswConfigPath ngsw-config.json文件路徑
--optimization=true|false 啟用構(gòu)建輸出的優(yōu)化
--outputHashing=none|all|media|bundles 默認值:none杭朱。定義輸出文件名緩存清除散列模式
--outputPath=outputPath 新輸出目錄的完整路徑,相對于當前工作空間吹散。默認情況下弧械,將輸出寫入當前項目中名為dist /的文件夾
--poll 啟用并定義查看輪詢時間段的文件(以毫秒為單位)
--polyfills=polyfills polyfills文件的完整路徑,相對于當前工作空間
--preserveSymlinks=true|false 默認值:false空民。解析模塊時不要使用真實路徑
--prod=true|false 如果為true刃唐,則將構(gòu)建配置設置為生產(chǎn)目標
--profile=true|false 默認值:false。Chrome Profiler的輸出配置文件事件
--progress=true|false 在構(gòu)建時將進度記錄到控制臺
--resourcesOutputPath=resourcesOutputPath 相對于outputPath界轩,將放置樣式資源的路徑
--serviceWorker=true|false 默認值:false画饥。為生產(chǎn)版本生成serviceWorker配置
--showCircularDependencies=true|false 默認值:true。在構(gòu)建上顯示循環(huán)依賴性警告
--sourceMap=true|false 默認值:true浊猾。輸出sourcemaps
--statsJson=true|false 默認值:false抖甘。生成'stats.json'文件,可以使用'webpack-bundle-analyzer'等工具進行分析
--subresourceIntegrity=true|false 默認值:false葫慎。允許使用子資源完整性驗證
--tsConfig=tsConfig TypeScript配置文件的完整路徑衔彻,相對于當前工作空間
--vendorChunk=true|false 默認值:true。使用僅包含供應商庫的單獨捆綁包
--verbose=true|false 默認值:false偷办。添加更多詳細信息以輸出日志記錄
--watch=true|false 默認值:false艰额。文件更改時運行構(gòu)建

3.5 ng config

ng config <jsonPath> <value> [options]

? ? ? ?
在工作空間的angular.json文件中檢索或設置Angular配置值。(查看或者設置angular.json文件中某個配置對應的值)

參數(shù) 說明
<jsonPath> 以JSON路徑格式設置或查詢配置鍵(configuration)椒涯。例如:“a[3].foo.bar [2]”悴晰。如果未提供新值,則返回此鍵的當前值逐工。
<value> 如果提供铡溪,則為給指定的配置(configuration)設置新值
選項 說明
--global=true|false 默認值:false,別名:-g泪喊。如果為true棕硫,則訪問調(diào)用方主目錄中的全局配置
--help=true|false|json|JSON 默認值:false。在控制臺中顯示此命令的幫助消息

? ? ? ?ng config的使用我們舉一個簡單的例子來說明袒啼。比如我們有這樣的一個angular.json(我們刪掉了很多東西)

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "verify-demo": {
      "sourceRoot": "src"
    }
  },
  "defaultProject": "verify-demo"
}

獲取 projects.verify-demo.sourceRoot 對應的值

ng config projects.verify-demo.sourceRoot

設置 projects.verify-demo.sourceRoot 對應的值為app

ng config projects.verify-demo.sourceRoot app

3.6 ng doc

ng doc <keyword> [options]
ng d <keyword> [options]

? ? ? ?
在瀏覽器中打開官方Angular文檔(angular.io)哈扮,并搜索給定的關(guān)鍵字。

參數(shù) 說明
<keyword> 要搜索的關(guān)鍵字蚓再,如angular.io中的搜索欄中所提供
選項 說明
--help=true|false|json|JSON 默認值:false滑肉。在控制臺中顯示此命令的幫助消息
--search=true|false 默認值:false,別名:-s摘仅。如果為true靶庙,則搜索angular.io的所有內(nèi)容。否則娃属,僅搜索API參考文檔

3.7 ng e2e

ng e2e <project> [options]
ng e <project> [options]

? ? ? ?構(gòu)建并提供Angular應用程序六荒,然后使用Protractor運行e2e測試。

必須從工作空間目錄中執(zhí)行矾端。如果未提供項目名稱掏击,則將對所有項目執(zhí)行

參數(shù) 說明
<project> 要構(gòu)建的項目的名稱≈让可以是應用程序或庫
選項 說明
--configuration=configuration 別名:-c砚亭。構(gòu)建目標,在angular.json的“configurations”部分中指定各個目標
--devServerTarget=devServerTarget 開發(fā)服務器目標以運行測試
--elementExplorer=true|false 默認值:false殴玛。啟動Protractor的Element Explorer進行調(diào)試
--help=true|false|json|JSON 默認值:false捅膘。在控制臺中顯示此命令的幫助消息
--host=host 默認值:localhost。監(jiān)聽地址
--port 用于為應用程序提供服務的端口
--prod=true|false 如果為true族阅,則將構(gòu)建配置設置為生產(chǎn)目標
--protractorConfig=protractorConfig Protractor配置文件的名稱
--specs Override specs in the protractor config.
--suite=suite Override suite in the protractor config
--webdriverUpdate=true|false 默認值:true篓跛。嘗試更新webdriver

3.8 ng help

ng help [options]

? ? ? ?列出可用的命令及其簡短描述。

選項 說明
--help=true|false|json|JSON 默認值:false坦刀。在控制臺中顯示此命令的幫助消息

3.9 ng lint

ng lint <project> [options]
ng l <project> [options]

? ? ? ?在給定項目文件夾中的Angular應用程序代碼上運行l(wèi)inting工具愧沟。

參數(shù) 說明
<project> lint項目的名稱
選項 說明
--configuration=configuration 別名:-c。要使用的linting配置(angular.json文件里面configuration配置)
--exclude 要從linting中排除的文件
--files 要包含在linting中的文件
--fix=true|false 默認值:false鲤遥。修復了linting錯誤(可能會覆蓋linted文件)
--force=true|false 默認值:false沐寺。即使有l(wèi)inting錯誤也能成功
--format=format 默認值:prose。輸出格式(prose, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist)
--help=true|false|json|JSON 默認值:false盖奈。在控制臺中顯示此命令的幫助消息
--silent=true|false 默認值:false混坞。顯示輸出文本
--tsConfig=tsConfig TypeScript配置文件的名稱
--tslintConfig=tslintConfig TSLint配置文件的名稱
--typeCheck=true|false 默認值:false。控制linting的類型檢查

3.10 ng run

ng run <target> [options]

? ? ? ?使用項目中定義的可選自定義構(gòu)建器配置運行Architect目標究孕。

Architect是CLI用于執(zhí)行復雜任務(如編譯)的工具,根據(jù)提供的配置(configurations),CLI命令運行Architect目標啥酱,例如build,serve厨诸,test和lint镶殷。每個命名目標都有一個默認配置,由“options”對象指定微酬,以及“配置”對象中一組可選的命名備用配置绘趋。

參數(shù) 說明
<target> 要運行的Architect目標
選項 說明
--configuration=configuration 別名:-c。angular.json文件configuration節(jié)點配置的名字
--help=true|false|json|JSON 默認值:false颗管。在控制臺中顯示此命令的幫助消息

3.11 ng serve

ng serve <project> [options]
ng s <project> [options]

? ? ? ?構(gòu)建并運行應用程序陷遮,而且在工程里面的文件有改動之后會自動rebuild。

? ? ? ?當執(zhí)行ng serve命令后垦江,將發(fā)生以下幾件事情:

  • Angular CLI 從 .angular-cli.json 文件中加載配置信息帽馋。
  • Angular CLI 運行 Webpack 打包相關(guān) JavaScript 和 CSS 文件。
  • Angular CLI 啟動 webpack dev server 本地開發(fā)服務器疫粥,默認的地址是 localhost:4200茬斧。
參數(shù) 說明
<project> 要構(gòu)建的項目的名稱」4可以是應用程序或庫
選項 說明
--aot=true|false 默認值:false项秉。是否使用AOT編譯。AOT(預編譯)慷彤;JIT(即使編譯)
--baseHref=baseHref 正在構(gòu)建的應用程序的基礎URL
--browserTarget=browserTarget 目標服務
--buildEventLog=buildEventLog 構(gòu)建事件協(xié)議事件的輸出文件路徑
--commonChunk=true|false 使用包含跨多個包使用的代碼的單獨包
--configuration=configuration 別名:-c娄蔼。構(gòu)建目標,在angular.json的“configuration”部分中指定
--deployUrl=deployUrl 將部署文件的URL
--disableHostCheck=true|false 默認值:false底哗。不驗證連接的客戶端是否是允許的主機的一部分
--help=true|false|json|JSON 默認值:false岁诉。在控制臺中顯示此命令的幫助消息
--hmr=true|false 默認值:false。啟用熱模塊更換
--hmrWarning=true|false 默認值:true跋选。啟用--hmr選項時顯示警告
--host=host 默認值:localhost涕癣。host對應的監(jiān)聽地址
--liveReload=true|false 默認值:true。是否使用實時重新加載來重新加載頁面
--open=true|false 默認值:false前标,別名:-o坠韩。在默認瀏覽器中打開網(wǎng)址
--optimization=true|false 啟用構(gòu)建輸出的優(yōu)化
--poll 啟用并定義查看輪詢時間段的文件(以毫秒為單位)
--port 默認值:4200。監(jiān)聽端口
--prod=true|false 如果為true炼列,則將構(gòu)建配置設置為生產(chǎn)目標
--progress=true|false 在構(gòu)建時將進度記錄到控制臺
--proxyConfig=proxyConfig 代理配置文件
--publicHost=publicHost 指定瀏覽器客戶端將使用的URL
--servePath=servePath 應用程序的路徑名
--servePathDefaultWarning=true|false 默認值:true只搁。當deploy-url / base-href使用不支持的服務路徑值時顯示警告
--sourceMap=true|false 默認值:true。輸出源圖
--ssl=true|false 默認值:false俭尖。使用HTTPS服務
--sslCert=sslCert 用于提供HTTPS的SSL證書
--sslKey=sslKey 用于提供HTTPS的SSL密鑰
--vendorChunk=true|false Use a separate bundle containing only vendor libraries
--verbose=true|false 默認值:false氢惋。添加更多詳細信息以輸出日志記錄
--watch=true|false 默認值:true洞翩。有改變的時候重新構(gòu)建

3.12 ng test

ng test <project> [options]
ng t <project> [options]

? ? ? ?在項目中運行單元測試。

Angular CLI 在新建項目的時候焰望,自動為我們集成了 Karma test runner 測試框架

? ? ? ?運行ng test命令之后骚亿,將會執(zhí)行以下幾個動作:

  • Angular CLI 從 .angular-cli.json 文件中加載配置信息促脉。
  • Angular CLI 基于 .angular-cli.json 文件中的 Karma 相關(guān)的配置信息究履,運行 Karma。Karma 的配置文件默認在根目錄下,文件名為 karma.conf.js 秫舌。
  • Karma 打開配置中設定的瀏覽器,默認是 Chrome绣檬。
    Karma 然后指示瀏覽器 (Chrome) 使用 Karma 配置中指定的測試框架運行 src/test.ts足陨。默認情況下,采用的是 Jasmine 框架娇未。創(chuàng)建應用程序時墨缘,會自動創(chuàng)建 src/test.ts 文件。它預先配置為加載和配置測試Angular 應用程序所需的代碼零抬,并運行 src 目錄中以 .spec.ts 結(jié)尾的所有文件镊讼。
  • Karma 將測試結(jié)果報告給控制臺。
  • Karma 監(jiān)聽 src 目錄下的文件的變化平夜,然后自動運行單元測試蝶棋。
參數(shù) 說明
<project> 要構(gòu)建的項目的名稱『龆剩可以是應用程序或庫
選項 說明
--browsers=browsers 覆蓋針對哪些瀏覽器測試運行
--codeCoverage=true|false 默認值:false玩裙。輸出代碼覆蓋率報告
--codeCoverageExclude 要從代碼覆蓋范圍中排除的Globs
--configuration=configuration 別名:-c。構(gòu)建目標段直,在angular.json的“configuration”部分中的某一個
--environment=environment 定義構(gòu)建環(huán)境
--help=true|false|json|JSON 默認值:false吃溅。在控制臺中顯示此命令的幫助消息
--karmaConfig=karmaConfig Karma配置文件的名稱
--main=main 主入口點文件的名稱
--poll 啟用并定義查看輪詢時間段的文件(以毫秒為單位)
--polyfills=polyfills polyfills文件的名稱
--preserveSymlinks=true|false 默認值:false。解析模塊時不要使用真實路徑
--prod=true|false 如果為true鸯檬,則將構(gòu)建配置設置為生產(chǎn)目標
--progress=true|false 在構(gòu)建時將進度記錄到控制臺
--reporters Karma reporters to use. Directly passed to the karma runner
--sourceMap=true|false 默認值:true决侈。Output sourcemaps.
--tsConfig=tsConfig TypeScript配置文件的名稱

3.13 ng update

ng update [options]

? ? ? ?更新您的應用程序及其依賴項。參見https://update.angular.io/喧务。

比如可以通過運行以下命令赖歌,對核心框架和CLI的v7執(zhí)行基本更新

ng update @angular/cli @angular/core

有關(guān)更新應用程序的詳細信息和指導可以參考https://update.angular.io/

選項 說明
--all=true|false 默認值:false蹂楣。是否更新package.json中的所有包
--force=true|false 默認值:false俏站。如果為false,如果安裝的軟件包與更新不兼容痊土,則會出錯
--from=from 要從中遷移的版本肄扎。僅適用于正在更新的單個程序包,且僅適用于僅遷移
--help=true|false|json|JSON 默認值:false。在控制臺中顯示此命令的幫助消息
--migrateOnly=true|false 默認值:false犯祠。僅執(zhí)行遷移旭等,不更新已安裝的版本
--next=true|false 默認值:false。使用最大的版本衡载,包括beta和RC
--packageManager=npm|yarn 默認值:npm搔耕。用于注冊表設置的首選包管理器配置文件
--packages 要更新的包的名稱
--registry=registry 要使用的NPM注冊表
--to=to 要應用遷移的版本。僅適用于正在更新的單個程序包痰娱,且僅適用于僅遷移弃榨。需要指定。默認為檢測到的已安裝版本
--verbose=true|false 在更新過程中顯示其他詳細信息

3.14 ng version

ng version [options]
ng v [options]

? ? ? ?輸出Angular CLI對應的版本

選項 說明
--help=true|false|json|JSON 默認值:false梨睁。在控制臺中顯示此命令的幫助消息

3.15 ng xi18n

ng xi18n <project> [options]

? ? ? ?從源代碼中提取i18n信息鲸睛。

參數(shù) 說明
<project> 要構(gòu)建的項目的名稱∑潞兀可以是應用程序或庫
選項 說明
--browserTarget=browserTarget 提取的目標
--configuration=configuration 別名:-c官辈。構(gòu)建目標,在angular.json的“configuration”部分中某個目標
--help=true|false|json|JSON 默認值:false遍坟。在控制臺中顯示此命令的幫助消息
--i18nFormat=xmb|xlf|xlif|xliff|xlf2|xliff2 默認值:xlf拳亿。生成文件的輸出格式
--i18nLocale=i18nLocale 指定應用程序的源語言
--outFile=outFile 要輸出的文件的名稱
--outputPath=outputPath 將放置輸出的路徑
--prod=true|false 如果為true,則將構(gòu)建配置設置為生產(chǎn)目標
--progress=true|false 默認值:true愿伴。將進度記錄到控制臺
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末肺魁,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子公般,更是在濱河造成了極大的恐慌万搔,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,332評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件官帘,死亡現(xiàn)場離奇詭異瞬雹,居然都是意外死亡,警方通過查閱死者的電腦和手機刽虹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評論 3 385
  • 文/潘曉璐 我一進店門酗捌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人涌哲,你說我怎么就攤上這事胖缤。” “怎么了阀圾?”我有些...
    開封第一講書人閱讀 157,812評論 0 348
  • 文/不壞的土叔 我叫張陵哪廓,是天一觀的道長。 經(jīng)常有香客問我初烘,道長涡真,這世上最難降的妖魔是什么分俯? 我笑而不...
    開封第一講書人閱讀 56,607評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮哆料,結(jié)果婚禮上缸剪,老公的妹妹穿的比我還像新娘。我一直安慰自己东亦,他們只是感情好杏节,可當我...
    茶點故事閱讀 65,728評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著典阵,像睡著了一般奋渔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上萄喳,一...
    開封第一講書人閱讀 49,919評論 1 290
  • 那天卒稳,我揣著相機與錄音,去河邊找鬼他巨。 笑死,一個胖子當著我的面吹牛减江,可吹牛的內(nèi)容都是我干的染突。 我是一名探鬼主播,決...
    沈念sama閱讀 39,071評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼辈灼,長吁一口氣:“原來是場噩夢啊……” “哼份企!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起巡莹,我...
    開封第一講書人閱讀 37,802評論 0 268
  • 序言:老撾萬榮一對情侶失蹤司志,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后降宅,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體骂远,經(jīng)...
    沈念sama閱讀 44,256評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,576評論 2 327
  • 正文 我和宋清朗相戀三年腰根,在試婚紗的時候發(fā)現(xiàn)自己被綠了激才。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,712評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡额嘿,死狀恐怖瘸恼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情册养,我是刑警寧澤东帅,帶...
    沈念sama閱讀 34,389評論 4 332
  • 正文 年R本政府宣布,位于F島的核電站球拦,受9級特大地震影響靠闭,放射性物質(zhì)發(fā)生泄漏帐我。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,032評論 3 316
  • 文/蒙蒙 一阎毅、第九天 我趴在偏房一處隱蔽的房頂上張望焚刚。 院中可真熱鬧,春花似錦扇调、人聲如沸矿咕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碳柱。三九已至,卻和暖如春熬芜,著一層夾襖步出監(jiān)牢的瞬間莲镣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評論 1 266
  • 我被黑心中介騙來泰國打工涎拉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瑞侮,地道東北人。 一個月前我還...
    沈念sama閱讀 46,473評論 2 360
  • 正文 我出身青樓鼓拧,卻偏偏與公主長得像半火,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子季俩,可洞房花燭夜當晚...
    茶點故事閱讀 43,606評論 2 350

推薦閱讀更多精彩內(nèi)容