今天就跟大家聊聊有关如何使用angular.json文件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
站在用户的角度思考问题，与客户深入沟通，找到茌平网站设计与茌平网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟主机、企业邮箱。业务覆盖茌平地区。
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为选填。
比如我们简单额外自定义一个本地运行的服务器命令：
{
"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所指向的文件，里面详细地展示了各种字段的类型、配置以及描述说明。
看完上述内容，你们对如何使用angular.json文件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
