【2019-10-16】Angular.json文件解析

Angular.json文件解析: 提供了全工作区级的配置和具体项目的默认配置，供Angular Cli中的构建工具和开发工具使用。此配置

所提供的路径都是相对于工作区根目录的

------ 6个option位于文件的顶级，用于配置工作空间 ---------

1、$schema:"./node_modules/@angular/cli/lib/config/schema.json"

// JSON schema是一个允

许我们注解和验证。JSON数据格式的工具，Angular CLi使用它来强化对于Angular Workspace schema的解释说明。若没有$schema属性，则不会对angular.json文件的格式做检验

2、version: 1 // 说明该配置文件的版本

3、newProjectRoot // 用来创建新工程的位置，绝对路径或者相对于工作区目录的路径

4、projects //对于工作区中的每个项目（应用或库）都会包含一个子分区，子分区是每个项目的配置项

5、defaultProject // 当命令中没有指定参数时，要使用的默认工程名。当你用ng new在新的工作区中创建应用时，该应用

就会一直作为此工作区的默认项目，除非你在这里修改它

6、schematics // 一组原理图，用于制定ng generate 子命令在本工作空间中的默认选项

ng new 创建的这个初级应用位于工作区文件结构的顶层

其他应用和库位于工作区的projects文件夹中

------- 7个options 属于projects：它还包括很多子分区 ---------

1、main: { // 应用名称 --第一个是ng new时的应用名称

2、projectType // 项目类型："application"或者"library"之一，应用可以在浏览器中独立运行，而库则不行

3、schematics //一组原理图，它可以为该项目自定义ng generate子命令的默认选项

4、root // 该项目的根文件夹，相对于工作区文件夹的路径。初始应用的值为空，因为它位于工作区的顶层

5、sourceRoot //该项目源文件的根文件夹

6、prefix //Angular所生成的选择器的前缀字符串。可以自定义它，以作为应用或功能区的标识

7、architect // 为本项目的各个构建目标配置默认值

}

------ schematics 属于projects，其具体说明如下：--------

脚手架库会定义如何借助创建、修改、重构或移动文件和代码等操作来生成或转换某个项目。每个原理图定义了一些规则，以操作

一个被称为文件树的虚拟文件系统

Angular CLI 使用原理图来生成和修改Angular项目及部件

1、Angular会提供一组用于CLI的原理图。当ng add命令向项目添加某个库时，就会运行原理图。na generate命令则会运行

原理图，来创建应用，库和Angular代码块

2、公共库的开发者可以创建原理图，来让CLI生成他们自已发布的库

Angular生成器的原理图是一组用来修改项目的指南，包括添加新文件或修改现有文件。默认情况下，Angular CLI的ng generate子命令会从@angular包中收集原理图。可以用schematic-package:schematic-name的格式为子命令指定原理图名称，比如，用来生成

组件的原理图名叫@angular: component

供CLI生成项目及部件的默认原理图的JSOM模式（schematic）位于@schematic/angular包中。这个模式描述了CLI ng generate子命令的每个选项，它们会显示在 --help的输出中。

这个模式中的每个字段都对应于CLI子命令选项的参数取值范围和默认值。

你可以修改此命名空间的模式文件，来为某个子命令选项指定另外的默认值

eg :修改ng generate component 时自动创建的样式文件类型，将原来默认的css改为scss

"schematics": {

"@schematics/angular:component": {

"style": "scss"

}

}

---------architect 项目工具的配置选项 具体简介 --------------

"architect" :{

"build”:{},

"serve":{},

"e2e":{},

"test":{},

"lint":{},

"extract-i18n":{},

"server":{},

"app-shell":{}

}

1、build --节会为ng build 命令的选项配置默认值,下面是build中的options:

builder -- 用于构建此目标的构建工具的npm 包，默认为 @angular-devkit/build-angular:browser，它使用的是 webpack 打包器。

options -- 本节包含构建选项的默认值，当没有指定命名的备用配置时使用，备用的构建选项包含：

①outputPath -- 编译后的输出目录

②index -- the name of the index HTML --index.html文件路径 （首页文件）

③main -- the name of main entry-point field

④polyfills -- 用于实现浏览器并不支持的原生API的代码

⑤tsConfig -- typescript 配置文件路径

⑥aot --预编译 ，默认值是false

⑦assets -- 一个对象,包含一些用于添加到项目的全局上下文中的静态文件路径。它的默认路径指向项目的图标文件及项目的assets文件 夹 ，构建时会复制到outPath指定的目录， for example

{

"src/client/main/src/favicon.ico",

"src/client/main/src/assets"

}

⑧styles -- 一个对象，包含一些要添加到项目全局上下文中的样式文件。Angular CLI支持CSS导入和所有主要的CSS预处理器：

sass/scss , less 和stylus //构建时会打包进来

⑨scripts -- 一个对象，包含一些JavaScript脚本文件，用于添加到项目的全局上下文中。这些脚本的加载方式和在index.html的

<script>标签中添加是完全一样的 //构建时会打包进来

configurations -- 本节定义并命名针对不同目标的备用配置。它为每个命名配置都包含一节，用于设置该目标环境的默认选项：

默认情况下，会定义一个production配置，//打包命令-–prod()的配置。这里的production配置会设置

各种默认值来优化应用，比如打包文件，最小化多余空格，移除注释和死代码，以及重写代码以使用简短的名字

①fileReplacements --一个对象，包含一些文件及其编译时替代品 ， for example

"fileReplacements": [

{

"replace": "src/client/main/src/environments/environment.ts",

"with": "src/client/main/src/environments/environment.prod.ts"

}

] //将环境信息替换成正式环境

②optimization : true //启动优化 开发环境配置是false

③outputHashing ：all // 开发环境配置是media

④sourceMap : false // 开发环境配置是true

⑤extractCss :true // 开发环境配置是false，true表示生成的CSS文件，false表示全局CSS输出到js文件

⑥namedChunks : false // 开发环境配置是true

⑦aot : true // 开发环境配置是false

⑧extractLicenses :true

⑨vendorChunk: false

⑩buildOptimizer:true //Enables @angular-devkit/build-optimizer optimizations when using the 'aot' option.

⑪budgets -- 全部或部分应用的默认尺寸 预算的类型和阈值。当构建的输出达到或超过阈值大小时，你可以将

构建器配置为报告警告或错误 ， for examples

"budgets": [

{

"type": "initial", (初始应用的大小) // 限制的类型，有效值还包含：bundle(特定包的大小), allScript(所有脚本的总体大小)，all (整个应用的总大小)， anyScript (任何一个脚本的大小), any（任何一个文件的大小）

“name” //要限制的包的名字（当type=bundle时），

“baseline” //一个表示基准大小的绝对值，用作比例值的基数

"maximumWarning": "2mb", //当大小超过这个阈值百分比时给出警告

"maximumError": "5mb" //当大小超过这个阈值百分比时报错

“minimumWarning” // 当大小小于基线的这个阈值百分比时给出警告。

“minimumError”// 当大小小于基线的这个阈值百分比时报错。

“warning ” // 当大小达到或小于基线的这个阈值百分比时都给出警告。

“error” //当大小达到或小于基线的这个阈值百分比时都报错。

}

]

2、serve

本节会覆盖构建默认值，并为 ng serve 命令提供额外的服务器默认值。除了 ng build 命令的可用选项之外，还增加了与开发服务器有关的选项。for example

"options": {

"browserTarget": "main:build",

"proxyConfig": "src/client/proxy.conf.json"

}

proxyConfig // 可以更改默认的端口4200

proxy.config.json文件内容：

{

"/api": {

"target": "http://localhost:3000",

"secure": false

}

}

//上面内容将 http://localhost:4200/api 的调用都转给运行在 http://localhost:3000/api 上的服务器

如果需要将多个条目代理到同一目标，请在proxyConfig.js中定义配置，而不是在proxy.conf.json中， for example

proxyConfig.js内容如下

const PROXY_CONFIG = [

{

context: [

"/api",

"/many",

"/endpoints"

],

target: "http://localhost:3000",

secure: false

}

]

module.exports = PROXY_CONFIG;

并且将options中的"proxyConfig": 改为proxyConfig.js路径

3、e2e

覆盖了构建选项默认值，以便用 ng e2e 命令构建端到端测试应用。

4、test

覆盖测试时的构建选项默认值，并为 ng test 命令提供额外的默认值以供运行测试。

5、lint

为 ng lint 命令配置了默认值，用于对项目源文件进行代码分析。 Angular 默认的 linting 工具为 TSLint。

6、extract-i18n

ng xi18n 命令所用到的 ng-xi18n 工具选项配置了默认值，该命令用于从源代码中提取带标记的消息串，并输出翻译文件。

7、server

ng run <project>:server 命令创建带服务器端渲染的 Universal 应用配置默认值。

8、app-shell

ng run <project>:app-shell 命令为渐进式 Web 应用（PWA）配置创建应用外壳的默认值。