在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 } } } } }
这个是项目默认生成的配置。