当我们使用 ng new test-app 时，会新建一个angular项目，其中包含一个名为angular.json的文件，这就是Angular项目的配置文件也就是Angular工作空间配置。
其中projects：对于工作区中的每个专案（应用或函式库）都会包含一个子分区，子分区中是每个专案的配置项。
ng则是Angular的一个命令，该命令在运行时将读取angular.json配置文件。
比如当前我们在写的就只有web这一项，但是智慧社区有web,wechat,lib三项，其中每一项都会包括以下几种配置
"test-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {}
}其中sourceRoot定义了根资料夹，也就是src文件夹。
projectType定义了该专案的类型——应用或者函数库，应用可以在浏览器中独立执行，而函式库则不行。在智慧社区中,web,wechat就是application(应用)，library(函数库)。
prefix则作为Angular 所产生的选择器的字首字串。可以自订它，以作为应用或功能区的标识。
architect为本专案的各个建构器目标配置预设值。
"architect": {
"build": { },
"serve": { },
"test": { },
"e2e" : { },
"lint": { },
"extract-i18n": { },
"server": { },
"app-shell": { }
}这些配置项就很清晰明了了，分别对应着：ng b,ng s,ng t等等命令。
其中每一项之中又包括这些参数：builder,options,configurations
其中options包含建构选项的预设值，当没有指定命名的备用配置时使用。
builder用于建构此目标的建构工具的npm 套件
其中options中包含有以下两种参数需要我们了解:styles:包含一些要新增到专案全域性上下文中的样式档案。Angular CLI 支援CSS 汇入和所有主要的CSS 前处理器。
当我们引入bootstrap或是引入fortawesome时不仅需要安装相应依赖，还要在此进行配置；
比如像这样：
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./node_modules/@fortawesome/fontawesome-free/css/all.css",
],scripts包含一些JavaScript 指令码档案，用于新增到专案的全域性上下文中。和styles一样，在引入iconfont或是bootstrap时也需要进行配置。
比如：
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./src/assets/icon/iconfont.js"
]configurations部分可以为目标命名并指定备用配置
Angular CLI 具有两种建构配置：production和development。预设情况下，ng build命令使用 production 配置，该配置将应用许多建构优化，包括：
- 打包档案
- 最小化多余的空白
- 删除注释和无效程式码
- 重写程式码，以使用简短、混乱的名称（最小化）
这应该也就是之前所说的打包后系统自动进行的优化，也就造成了我们在页面中点击查看源代码与我们自己写的代码不同的原因。
其中对于更精细的优化配置参数为：optimization，此选项可对建构输出进行各种优化，包括：
- 指令码和样式的最小化
- 摇树优化
- 消除死程式码
- 内联关键CSS
- 字型内联
此外，值得一提的是在配置fortawesome或是bootstrap时只在build中进行配置，ng s下就可以见到效果，猜测与
"options": {
"browserTarget": "test-app:build"
},中的browserTarget有关，经查询browserTarget是将配置映射到构建目标的设置，Angular默认ng serve中options和configurations与ng build相同。
在此基础上又去查了一下ng build 和 ng serve 的区别
ng build 构建应用程序并进行部署。
ng serve 构建、部署、服务并每次监视您的代码更改。如果在代码中发现任何更改，它会自动构建并提供该代码。