Angular 工作空間 指的是 一個 由Angular CLI創建，並且能夠包含多個項目 或者 由單一文件導出配置的庫 的目錄空間。
angular.json的配置文件,這個文件是整個項目的概要，包含了 不同的環境，測試、代理、第三方資源 和 眾多內置工具。
angular.json
$schema
JSON Schema 是一個允許我們注解和驗證JSON數據格式的工具。Angular CLI使用它來強化對於Angular Workspace schema的解釋說明。
"$schema": "./node_modules/@angular/cli/lib/config/schema.json"
version
`version`屬性 指明了Angular 工作空間 概要的版本。
packageManager
這個屬性定義了Angular CLI使用的包管理工具，開執行命令，比如 `npm`,`yarn`.
newProjectRoot
這個屬性定義了由CLI創建的新的內部應用和庫放置的位置。默認值為`projects`
projects
這個屬性包含了工作空間中所有項目的配置信息。下一級是多個項目
項目名
每一個項目的配置信息在下列屬性中：
schematics
作為Angular DevKit的一部分，用來轉換、創建 或者 更新項目開發的工作流工具。
`schematics`屬性 可以在工作空間的root level來配置Schematics packages的選項。
假設我們要 保證 每一個組件用不同的默認設置 來創建。例如，使用默認 使用 OnPush作為檢測策略，通過聲明模塊和導出組件。
"schematics": {
"@schematics/angular:component": {
"changeDetection": "OnPush",
"export": true
},
"@schematics/angular:class": {
"skipTests": true
},
}
root
`root`屬性 指定了項目文件的根文件夾，可能為空，但是它指定了一個特定的文件夾。
sourceRoot
`sourceRoot`指定了項目源文件位置
projectType
`projectType`屬性表明了 項目的狀態 是 `appliaction`還是`library`。
prefix
`prefix`屬性 當CLI創建 `component`或者`directive`時，使用該屬性 來區別他們。
schematics
`schematics`屬性配置 `Schematics packages`
architect
任何項目都可以自定義 自動化命令，如 打包、serve、test、lint等等。這些都是基於prebuilt builders ，叫做Architect Targets。
"angular-cli-workspace-example": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {},
"configurations": {}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {},
"configurations": {}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {}
}
}
}
defaultProject
`defaultProject`屬性 當使用CLI命令時，`defaultProject`代表顯示的名字。
具體
// https://segmentfault.com/a/1190000016292354
// https://angular.cn/guide/workspace-config
{
// 注解和驗證JSON數據格式的工具
// 比如可以自動填充屬性或屬性值
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
// 用來創建析工程的位置。絕對路徑或相對於工作區目錄的路徑
// 使用 ng generate application myDemo, 就會在 angular-dave/projects 目錄下生成 myDemo 項目
"newProjectRoot": "projects",
// 這個屬性包含了工作空間中所有項目的配置信息
// 如果如上生成 myDemo, 那么在這里還有與 angular-dave 同一層級的 myDemo 的配置
"projects": {
"angular-dave": {
// 該屬性有 application 和 library 兩種選擇
"projectType": "application",
"schematics": {
// 在項目級別統一進行配置
// 比如在這里，配置了所有的 component 都使用 scss
// 可試着查看其它的配置項，因為有 $schema, 會幫你自動補全相關屬性
"@schematics/angular:component": {
"style": "scss"
}
},
// 指定了項目文件的根文件夾，可能為空，但是它指定了一個特定的文件夾
// 如果如上生成 myDemo, 那么 myDemo 的如下幾個屬性值路徑會有所不同
"root": "",
"sourceRoot": "src",
// 當CLI創建 `component`或者`directive`時，使用該屬性 來區別他們
"prefix": "app",
// 為本項目的各個構建器目標配置默認值
"architect": {
// 為 ng build 命令的選項配置默認值
"build": {
// 每個目標對象都指定了該目標的 builder，它是 architect (建築師)所運行工具的 npm 包
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-dave",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
// 包含一些用於添加到項目的全局上下文中的靜態文件路徑
// 每個 build 目標配置都可以包含一個 assets 數組，它列出了當你構建項目時要復制的文件或文件夾。
// 默認情況下，會復制 src/assets/ 文件夾和 src/favicon.ico
"assets": [
"src/favicon.ico",
"src/assets"
],
// 包含一些要添加到項目全局上下文中的樣式文件(即全局樣式)
"styles": [
"src/styles.scss"
],
// 包含一些 JavaScript 腳本文件，用於添加到項目的全局上下文中。
// 這些腳本的加載方式和在 index.html 的 <script> 標簽中添加是完全一樣的。
"scripts": []
},
// configurations 部分可以為目標命名並指定備用配置
"configurations": {
// you can use that configuration by specifying the --configuration="production" or the --prod="true" option.
// ng build --prod=true|false
// Shorthand for "--configuration=production".
// When true, sets the build configuration to the production target.
// By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts"
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
// 全部或部分應用的默認尺寸預算的類型和閾值。
// 當構建的輸出達到或超過閾值大小時，你可以將構建器配置為報告警告或錯誤
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
// 覆蓋構建默認值，並為 ng serve 命令提供額外的服務器默認值
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular-dave:build"
},
"configurations": {
"production": {
"browserTarget": "angular-dave:build:production"
}
}
},
// 為 ng xi18n 命令所用到的 ng-xi18n 工具選項配置了默認值
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-dave:build"
}
},
// 覆蓋測試時的構建選項默認值，並為 ng test 命令提供額外的默認值以供運行測試
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
// 為 ng lint 命令配置了默認值，用於對項目源文件進行代碼分析
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
// 覆蓋了構建選項默認值，以便用 ng e2e 命令構建端到端測試應用
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "angular-dave:serve"
},
"configurations": {
"production": {
"devServerTarget": "angular-dave:serve:production"
}
}
}
}
}
},
"defaultProject": "angular-dave"
}