Angular.json文件解析: 提供了全工作區級的配置和具體項目的默認配置,供Angular Cli中的構建工具和開發工具使用。此配置
所提供的路徑都是相對於工作區根目錄的
------ 6個option位於文件的頂級,用於配置工作空間 ---------
1、$schema:"./node_modules/@angular/cli/lib/config/schema.json"
// JSON schema是一個允
許我們注解和驗證。JSON數據格式的工具,Angular CLi使用它來強化對於Angular Workspace schema的解釋說明。若沒有$schema屬性,則不會對angular.json文件的格式做檢驗
2、version: 1 // 說明該配置文件的版本
3、newProjectRoot // 用來創建新工程的位置,絕對路徑或者相對於工作區目錄的路徑
4、projects //對於工作區中的每個項目(應用或庫)都會包含一個子分區,子分區是每個項目的配置項
5、defaultProject // 當命令中沒有指定參數時,要使用的默認工程名。當你用ng new在新的工作區中創建應用時,該應用
就會一直作為此工作區的默認項目,除非你在這里修改它
6、schematics // 一組原理圖,用於制定ng generate 子命令在本工作空間中的默認選項
ng new 創建的這個初級應用位於工作區文件結構的頂層
其他應用和庫位於工作區的projects文件夾中
------- 7個options 屬於projects:它還包括很多子分區 ---------
1、main: { // 應用名稱 --第一個是ng new時的應用名稱
2、projectType // 項目類型:"application"或者"library"之一,應用可以在瀏覽器中獨立運行,而庫則不行
3、schematics //一組原理圖,它可以為該項目自定義ng generate子命令的默認選項
4、root // 該項目的根文件夾,相對於工作區文件夾的路徑。初始應用的值為空,因為它位於工作區的頂層
5、sourceRoot //該項目源文件的根文件夾
6、prefix //Angular所生成的選擇器的前綴字符串。可以自定義它,以作為應用或功能區的標識
7、architect // 為本項目的各個構建目標配置默認值
}
------ schematics 屬於projects,其具體說明如下:--------
腳手架庫會定義如何借助創建、修改、重構或移動文件和代碼等操作來生成或轉換某個項目。每個原理圖定義了一些規則,以操作
一個被稱為文件樹的虛擬文件系統
Angular CLI 使用原理圖來生成和修改Angular項目及部件
1、Angular會提供一組用於CLI的原理圖。當ng add命令向項目添加某個庫時,就會運行原理圖。na generate命令則會運行
原理圖,來創建應用,庫和Angular代碼塊
2、公共庫的開發者可以創建原理圖,來讓CLI生成他們自已發布的庫
Angular生成器的原理圖是一組用來修改項目的指南,包括添加新文件或修改現有文件。默認情況下,Angular CLI的ng generate子命令會從@angular包中收集原理圖。可以用schematic-package:schematic-name的格式為子命令指定原理圖名稱,比如,用來生成
組件的原理圖名叫@angular: component
供CLI生成項目及部件的默認原理圖的JSOM模式(schematic)位於@schematic/angular包中。這個模式描述了CLI ng generate子命令的每個選項,它們會顯示在 --help的輸出中。
這個模式中的每個字段都對應於CLI子命令選項的參數取值范圍和默認值。
你可以修改此命名空間的模式文件,來為某個子命令選項指定另外的默認值
eg :修改ng generate component 時自動創建的樣式文件類型,將原來默認的css改為scss
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
---------architect 項目工具的配置選項 具體簡介 --------------
"architect" :{
"build”:{},
"serve":{},
"e2e":{},
"test":{},
"lint":{},
"extract-i18n":{},
"server":{},
"app-shell":{}
}
1、build --節會為ng build 命令的選項配置默認值,下面是build中的options:
builder -- 用於構建此目標的構建工具的npm 包,默認為 @angular-devkit/build-angular:browser,它使用的是 webpack 打包器。
options -- 本節包含構建選項的默認值,當沒有指定命名的備用配置時使用,備用的構建選項包含:
①outputPath -- 編譯后的輸出目錄
②index -- the name of the index HTML --index.html文件路徑 (首頁文件)
③main -- the name of main entry-point field
④polyfills -- 用於實現瀏覽器並不支持的原生API的代碼
⑤tsConfig -- typescript 配置文件路徑
⑥aot --預編譯 ,默認值是false
⑦assets -- 一個對象,包含一些用於添加到項目的全局上下文中的靜態文件路徑。它的默認路徑指向項目的圖標文件及項目的assets文件 夾 ,構建時會復制到outPath指定的目錄, for example
{
"src/client/main/src/favicon.ico",
"src/client/main/src/assets"
}
⑧styles -- 一個對象,包含一些要添加到項目全局上下文中的樣式文件。Angular CLI支持CSS導入和所有主要的CSS預處理器:
sass/scss , less 和stylus //構建時會打包進來
⑨scripts -- 一個對象,包含一些JavaScript腳本文件,用於添加到項目的全局上下文中。這些腳本的加載方式和在index.html的
<script>標簽中添加是完全一樣的 //構建時會打包進來
configurations -- 本節定義並命名針對不同目標的備用配置。它為每個命名配置都包含一節,用於設置該目標環境的默認選項:
默認情況下,會定義一個production配置,//打包命令-–prod()的配置。這里的production配置會設置
各種默認值來優化應用,比如打包文件,最小化多余空格,移除注釋和死代碼,以及重寫代碼以使用簡短的名字
①fileReplacements --一個對象,包含一些文件及其編譯時替代品 , for example
"fileReplacements": [
{
"replace": "src/client/main/src/environments/environment.ts",
"with": "src/client/main/src/environments/environment.prod.ts"
}
] //將環境信息替換成正式環境
②optimization : true //啟動優化 開發環境配置是false
③outputHashing :all // 開發環境配置是media
④sourceMap : false // 開發環境配置是true
⑤extractCss :true // 開發環境配置是false,true表示生成的CSS文件,false表示全局CSS輸出到js文件
⑥namedChunks : false // 開發環境配置是true
⑦aot : true // 開發環境配置是false
⑧extractLicenses :true
⑨vendorChunk: false
⑩buildOptimizer:true //Enables @angular-devkit/build-optimizer optimizations when using the 'aot' option.
⑪budgets -- 全部或部分應用的默認尺寸 預算的類型和閾值。當構建的輸出達到或超過閾值大小時,你可以將
構建器配置為報告警告或錯誤 , for examples
"budgets": [
{
"type": "initial", (初始應用的大小) // 限制的類型,有效值還包含:bundle(特定包的大小), allScript(所有腳本的總體大小),all (整個應用的總大小), anyScript (任何一個腳本的大小), any(任何一個文件的大小)
“name” //要限制的包的名字(當type=bundle時),
“baseline” //一個表示基准大小的絕對值,用作比例值的基數
"maximumWarning": "2mb", //當大小超過這個閾值百分比時給出警告
"maximumError": "5mb" //當大小超過這個閾值百分比時報錯
“minimumWarning” // 當大小小於基線的這個閾值百分比時給出警告。
“minimumError”// 當大小小於基線的這個閾值百分比時報錯。
“warning ” // 當大小達到或小於基線的這個閾值百分比時都給出警告。
“error” //當大小達到或小於基線的這個閾值百分比時都報錯。
}
]
2、serve
本節會覆蓋構建默認值,並為 ng serve 命令提供額外的服務器默認值。除了 ng build 命令的可用選項之外,還增加了與開發服務器有關的選項。for example
"options": {
"browserTarget": "main:build",
"proxyConfig": "src/client/proxy.conf.json"
}
proxyConfig // 可以更改默認的端口4200
proxy.config.json文件內容:
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
//上面內容將 http://localhost:4200/api 的調用都轉給運行在 http://localhost:3000/api 上的服務器
如果需要將多個條目代理到同一目標,請在proxyConfig.js中定義配置,而不是在proxy.conf.json中, for example
proxyConfig.js內容如下
const PROXY_CONFIG = [
{
context: [
"/api",
"/many",
"/endpoints"
],
target: "http://localhost:3000",
secure: false
}
]
module.exports = PROXY_CONFIG;
並且將options中的"proxyConfig": 改為proxyConfig.js路徑
3、e2e
覆蓋了構建選項默認值,以便用 ng e2e 命令構建端到端測試應用。
4、test
覆蓋測試時的構建選項默認值,並為 ng test 命令提供額外的默認值以供運行測試。
5、lint
為 ng lint 命令配置了默認值,用於對項目源文件進行代碼分析。 Angular 默認的 linting 工具為 TSLint。
6、extract-i18n
ng xi18n 命令所用到的 ng-xi18n 工具選項配置了默認值,該命令用於從源代碼中提取帶標記的消息串,並輸出翻譯文件。
7、server
ng run <project>:server 命令創建帶服務器端渲染的 Universal 應用配置默認值。
8、app-shell
ng run <project>:app-shell 命令為漸進式 Web 應用(PWA)配置創建應用外殼的默認值。