簡單說說 angular.json 文件

...

在Angular CLI 6+的版本後，原先的angular-cli.json就被換成了angular.json，而其中裏面的字段變化挺大了，若是不瞭解基本的組成，或者直接把老版本的代碼 copy 到新版本的工做空間中，會致使一些很不友好的錯誤。

這種變化主要仍是由於Angular CLI引入了 monorepo (一個空間管理多個項目) 的開發模式，即便用ng new出來的至關於一個大的工做空間，經過angular.json配置來管理各類ng generate application | library出來的項目或組件庫。

其實這種模式優點仍是很明顯的，好比一個公司有多種管理平臺或者產品時，使用這種方式能夠統一各個項目的環境，各個項目間共用的組件也被統一維護起來，全部項目共用npm包以及typescript配置。

monorepo下結構如：

可是其實大多數人仍是一個工做空間維護一個項目，因此這個在這裏不那麼重要，只是想說json文件的改變是爲了新的模式而已。

Angular.json的部分字段

當你ng new一個工做空間時，默認會在根目錄建立一個項目以及對應e2e項目。初始的angular.json結構以下（省略的部分的配置代碼）

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "xxxx": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {}
        }
    },
    "defaultProject": "xxxx"
}

這是部分的配置屬性，我按照順序簡單作個記錄，之後也好查閱。

$schema

指向一個 JSON Schema 文件，這個文件描述了angular.json全部的字段以及約束。

其實能夠比做一個有「類型提示」功能文件，只要支持了這個功能的 IDE 或編輯器，在書寫angular.json文件時便會給出相應的提示。

version

設置版本

newProjectRoot

新建項目所在的路徑。

當使用ng generate application | library建立一個新的項目時，會自動裝配到設定的newProjectRoot目錄下

projects

放置全部項目的配置。其中一個項目爲一個子項，如xxxx爲一個項目，在建立時自動生成。

{
    "projects": {
        "xxxx": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {}
        }
    }
}

在一個單獨的配置中，能夠經過靈活的配置實現一些自動化操做還有使用CLI內置的一些指令。

root

表明項目的「根目錄」，也就是項目所在的位置，或者說項目源碼的父級目錄。項目的根目錄包含了一些特定的配置。

sourceRoot

項目源碼所在的目錄，一般默認使用src目錄。

projectType

標示這個項目是application仍是library

prefix

使用ng generate component | directive生成組件或者指令時默認的selector前綴，一般咱們使用命令建立的組件或指令都是app-xxx格式，咱們能夠手動在這裏改動，使整個項目生效。

schematics

CLI中生成組件、指令、模塊等文件的指令是使用@angular-devkit/schematics實現的，這些指令一般帶有一些快捷配置，好比一個生成組件的命令：ng g c --spec=false --styleext=scss，這條命令能夠直接生成一個 不帶測試文件、使用scss爲樣式文件 的組件。若是每次都要手動輸入這些配置就會顯得麻煩，因此angular.json提供了schematics屬性來統一設置一些生成類的命令配置。

這裏的schematics是針對單個project來的。整個angular.json也有此字段，默認生效於全部project。

CLI預設了幾組選項，咱們能夠針對不一樣的選項進行配置：

• @schematics/angular:component
• @schematics/angular:class
• @schematics/angular:directive
• @schematics/angular:guard
• @schematics/angular:module
• @schematics/angular:pipe
• @schematics/angular:service

拿component舉例，若是要實現統一ng g c --spec=false --styleext=scss的效果，能夠配置以下：

{
    "schematics": {
        "@schematics/angular:component": {
             "styleext": "less",
             "spec": false
        }
    }
}

接着就能夠直接使用ng g c直接生成對應的組件了。

architect

包含幾組CLI相關的項目自動化命令配置，好比本地運行、編譯、測試等等。默認預設了幾組命令配置如build、serve等等：

{
    "architect":{
        "build":{},
        "serve":{},
        "extract-i18n":{},
        "test":{},
        "lint":{}
    }
}

配置屬性

每個配置項都有 3 個字段屬性：builder，options，configurations，例如默認的build命令配置：

{
    "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
                "outputPath": "dist/testApp",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                    "src/favicon.ico",
                    "src/assets"
                ],
                "styles": [
                    "src/styles.css"
                ],
                "scripts": []
             },
             "configurations": {
                 "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
                  }
              }
          }
      }
}

這個是項目默認生成的配置。

builder表明要執行的內置程序，由於CLI內置了一些自動化工具，architect只是提供了一個facade模式（通俗地講，就是開發者不須要知道內部的複雜實現）給開發者配置使用，本質上仍是調用的內置工具。

options表明針對當前builder要配置的配置項，調用不一樣的內置程序，是須要傳對應的配置項的，因爲配置項不少，這裏也不會列出。

configurations表明這個命令的多種調用模式，在此配置裏，咱們能夠定義不一樣的別名，而後使用不一樣的配置（配置的字段仍是屬於options裏的），最後在使用命令時即可以手動選擇不一樣的模式。

如何使用

CLI其實內置了幾個快捷命令來對應默認生成的配置如ng serve、ng build等等，若是是咱們額外自定義的配置，則可使用ng run <project>:<architect>[:configurations] [其餘配置]
命令來實現，其中project和architect爲必填，configurations爲選填。

好比咱們簡單額外自定義一個本地運行的服務器命令：

{
    "architect":{
        "myServe":{
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
                "browserTarget": "xxxx:build",
                "port": 8800
            },
            "configurations": {
                "port1": {
                    "port": 8801
                },
                "port2": {
                    "port": 880
                }
            }
        }
    }
}

配置使用了內置的運行本地服務器程序，而後使用默認的build配置，加上自定義的運行端口，另外加上兩個不一樣模式，運行不一樣端口。

使用ng run xxxx:myServe能夠正常運行本地服務器跑項目，端口是8800
使用ng run xxxx:myServe:port1端口是8801

固然，咱們還能夠直接使用額外的命令行配置直接覆蓋已經定義的配置：
ng run xxxx:myServe:port1 --port=8808

這裏的例子只是爲了簡單瞭解下architect的用法。

defaultProject

默認項目，當使用一些CLI命令沒有指定項目名稱時，默認指向的項目。

schema.json

其實我只是爲了記錄本身有點印象的屬性，整個angular.json還有不少其餘的字段，若是想要全面瞭解，咱們能夠直接打開$schema所指向的文件，裏面詳細地展現了各類字段的類型、配置以及描述說明。