angular.json文件中字段含義


Angular CLI 6+的版本后,原先的angular-cli.json就被換成了angular.json。這種變化主要還是因為Angular CLI引入了 monorepo (一個空間管理多個項目) 的開發模式,即使用ng new出來的相當於一個大的工作空間,通過angular.json配置來管理各種ng generate application | library出來的項目或組件庫。文件主要是工作區中所有項目的 CLI 配置,包括 CLI 使用的構建選項、運行選項、測試工具選項等。

monorepo下結構如:

但大多數人還是一個工作空間維護一個項目。如下圖所示:

當你ng new一個工作空間時,默認會在根目錄創建一個項目以及對應e2e項目。初始的angular.json結構如下:

 

$schema 

指向一個 JSON Schema 文件,這個文件描述了angular.json所有的字段以及約束。

其實可以比作一個有“類型提示”功能文件,只要支持了這個功能的 IDE 或編輯器,在書寫angular.json文件時便會給出相應的提示。

version

設置Angular 工作空間版本

newProjectRoot

新建項目所在的路徑。當使用ng generate application | library創建一個新的項目時,會自動裝配到設定的newProjectRoot目錄下。

projects

放置所有項目的配置。其中一個項目為一個子項,如my-app為一個項目,在創建時自動生成。

在一個單獨的配置中,可以通過靈活的配置實現一些自動化操作還有使用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預設了幾組選項,具體可參考“$schema”指向的文件,我們可以針對不同的選項進行配置:

  • @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的效果,可以配置如下:

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

architect

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

配置屬性

每一個配置項都有 3 個字段屬性:builderoptionsconfigurations。

builder代表要執行的內置程序,因為CLI內置了一些自動化工具,architect只是提供了一個facade模式(通俗地講,就是開發者不需要知道內部的復雜實現)給開發者配置使用,本質上還是調用的內置工具。

options代表針對當前builder要配置的配置項,調用不同的內置程序,是需要傳對應的配置項的,由於配置項很多,這里也不會列出。

configurations代表這個命令的多種調用模式,在此配置里,我們可以定義不同的別名,然后使用不同的配置(配置的字段還是屬於options里的),最后在使用命令時便可以手動選擇不同的模式。

如何使用

CLI其實內置了幾個快捷命令來對應默認生成的配置如ng serveng build等等,如果是我們額外自定義的配置,則可以使用ng run <project>:<architect>[:configurations] [其他配置]
命令來實現,其中projectarchitect為必填,configurations為選填。

defaultProject

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM