在上一篇中介绍了什麽是 Angular CLI 与他可以提供许多方便功能，不过只是大概介绍他的用法与他是什麽，要实际了解到他背後的运行逻辑其实是满复杂的，这边就不详细的讲解（因为我也不太了解。

不过说到 Angular CLI 就避免不了要介绍一下 Angular CLI 的控制塔 " angular.json "， angular.json 是位於 Angular workspace root level 的一个文件，主要是提供 workspace 的配置与 project 的预设配置，供 Angular CLI 中 build 和 development tool 使用。

A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.

Overall JSON structure

大概讲完 angular.json 是干嘛的後接下来要分析一下 angular.json 的结构。

angular.json 主要分为两个区域： root 和 project。

root 的部分主要是关於 workspace 的一些信息，主要用於配置 workspace，你会在上面找到：

• version：你的 workspace 配置版本
• newProjectRoot：这是用於创建新项目的路径，比如使用 ng generate application 或 ng generate library ，那麽 Angular CLI 会藉由这个路径知道要从哪里生成 applicatioon 或 library。
• defaultProject：这是在你使用 ng new 时所创建的属性，他对应着你创建这个项目时给定的初始名称，如果在使用 Angular CLI 时没有填入项目名称，则会直接将这个属性带入，比如说你要执行 app 时所使用的 ng server ，你可以直接执行 ng server 而不会出错的原因就是它会自动将名称带入变成 ng server my-app。
• projects：这里包含了你的 application 和 library 所有必要的讯息。
• schematics：用於客制化 ng generation 命令的预设选项。

project 的部分包含 CLI 可以使用的特定讯息，你会在上面找到：

• root：这是 project 相对於 workspace 的路径。
• sourceroot：这是包含当前项目 source file 的文件夹路径。
• projectType：可以是 application 或 library，CLI 需要知道专案类型，因为每种类型都有对应的需求与限制，比如说 library 需要被打包才能分发并且不能在与 application 相反的浏览器中提供服务。
• prefix：这是当前项目 selectors 的前缀字串，当使用 ng generate component 时会将这个前缀字加在你的 component 前面，比如你的 prefix 这制为 gna，那麽使用 ng generate component hello-world 所创建出来的 component 的 selectors 就会是 "gna-hello-world"。
• schematics：用於这是当前 project 中某些 schematics 所使用到的默认选项，比如你要将你专案的样是从 CSS 变为 SCSS，就可以在这个属性中添加 “styleext”:“scss”。
• architect：为这个 project 各个 architect 提供预设值。

下图是一个简单的 angular.json file，其中只有一个 build command。

What is Architect ?

可能看到这边很多人都会觉得还可以，毕竟这些 porperty 大概都能了解在干嘛而且也可以在自己的 Angular app 中找到对应的位置，但是！ "Architect" 这个到底是什麽？，可能对很多新手来说相当的复杂（我现在也迷迷糊糊，有说错的话欢迎指正），接下来我们就来看看 Angular 官网是怎麽描述这个东西的。

Architect is the tool that the CLI uses to perform complex tasks, such as compilation and test running

Architect 是 CLI 用来执行复杂任务的工具，例如 compilation 和 test running，而 Architect 是一个 shell，它根据 target configuration 执行指定的 Builder 来执行给定的任务

可以把它看作是 Angular CLI 与 builder 之间的 "中间人"，Architect 是可以访问或修改特定 builder 选项或添加选项配置的地方，当你输入 command 後 Architect 会对 command 进行分析、解析最後对正确的 builder 执行请求操作。

What is Builders ?

大概了解 Architect 是什麽并且他在做什麽之後，那麽什麽是 Builders？， Builders 是 Architect 要处理特定任务时所运行的工具，通常他会对应到 npm package，例如 packageing your libreay 或 building，和 serving application。

通常 builders 会接收两个参数，一组输入 option ( a JSON object )，和一个 context ( a BuilderContext object )，option object 由 CLI 使用者提供，而 context 由 CLI Builder API 提供。

Angular 提供了一些由 CLI 用於 ng build 和 ng test 等命令的 builders，这些内建的 CLI Builders 可以在 angular.json 的 "Architect" 部分找到，当然你也可以当然你也可以使用 ng run 来自定你想要的 builders，不过这有点过於深入不在本章节的讨论范围。

Understanding the command mapping

正如我们前面所说的，当你输入 command 後 Architect 会对 command 进行分析、解析最後对正确的 builder 执行请求操作，所以当我们输入了简化的 command 後，实际上他会被 Architect 转化成通用的 command : ng run projectName:architectTarget。

Example: build: ng build... → ng run :build

知道了这一点後我们可以推敲一下这些命令在 Architect 转换後会变成什麽：

• build: ng build … → ng run my-app:build;
• serve: ng serve … → ng run my-app:serve;
• e2e: ng e2e … → ng run my-app:e2e;
• test: ng test … → ng run my-app:test;
• lint: ng lint … → ng run my-app:lint;
• extract-i18n: ng xi18n … → ng run my-app:xi18n

Assets configuration

在每一个 build target 中都可以有一个阵列，里面可以放你想要的文件或文件夹，他会在你 build 专案的时候按照原样复制一份，不会对他进行压缩或打包，通常会把图片放在这边。

"assets": [
  "src/assets",
  "src/favicon.ico"
]

你可以把 Assets 的内容变为一个一个的物件，这样相较於只有填入档案名称或路径会更清楚与更清晰，将 Assets 的内容变为物件可以具有以下个 key：

• glob：使用 node-glob 设置的基本目录
• input：相对於 root 目录的路径
• output：相对於 outDir 的路径，简单来说就是 build 後存放的位置，预设是 dist / project-name
• ignore：要排除的 glob 列表
• followSymlinks：使否允许搜寻符号链接的子目录，默认为 false

举个例子你可以使用这些 key 更详细描述你的 asset 路径：

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  }
]

结论

在本篇文章中大概了解的 angular.json 是个什麽东西，了解他与 Angular CLI 之间的关系，也大概个介绍了什麽是 Architect 与 builders ，不过都只是稍微讲解一下概念并没有太过深入钻研他背後的运作原理，不过还是大概总结一下：

• angular.json 是 Angular CLI 的控制塔，它提供了 Angular workspace 和 project 的预设配置。
• 讲解了一些 angular.json 的资料架构。
• 什麽是 Architect 和 Builders 与他们之间的关系。
• Angular CLI 是如何透过 Architect 解析命令的。
• 如何透过 assets 在打包专案时复制完整的资料。

Reference

• Angular CLI — Demystifying the workspace
• Angular.io