当我们使用ngnewtest-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和微信是application（应用）和library（函数库）。前缀作为Angular生成的选择器的前缀字符串。它可以定制以识别应用程序或色带。架构师为该项目的每个构建器目标配置默认值。“建筑师”：{“构建”：{}，“服务”：{}，“测试”：{}，“e2e”：{}，“lint”：{}，“extract-i18n”：{}，“server":{},"app-shell":{}}这几个配置项很清楚，对应的是：ngb,ngs,ngt等命令。其中每一个都包括以下参数：builder、options、configurations，其中options包含构建选项的默认值，在未指定命名备用配置时使用。builder用于构建这个target的构建工具的npm包。options包含以下两个我们需要了解的参数：styles：包含一些要添加到项目全局上下文中的样式文件。AngularCLI支持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"]配置部分可以命名目标并指定一个备用配置AngularCLI有两种构建配置：生产和开发。默认情况下，ngbuild命令使用生产配置，它应用了一些构建优化，包括：捆绑文件最小化冗余空格删除注释和死代码重写代码以使用简短、令人困惑的名称（最小化）这应该是前面说到打包后的系统，这也造成了我们点击查看页面源码和自己写的代码不一样的原因。其中，更细化优化的配置参数为：optimization，可以对构建输出进行各种优化，包括：最小化脚本和样式tree-shaking优化消除死代码inliningkeyCSSfontinlining另外值得一提的是值得一提的是，在配置fortawesome或者bootstrap的时候，只是在build中配置，ngs下可以看到效果。猜测是"options"中的browserTarget:{"browserTarget":"test-app:build"}，相关的，查询后browserTarget是将配置映射到构建目标的设置，Angular默认了ngserve中的options和配置与ng构建相同。在此基础上查看了ngbuild和ngserve的区别。ngbuild构建应用程序并部署它。ngserve每次都会构建、部署、服务和监控您的代码更改。如果它发现代码有任何变化，它会自动构建并提供该代码。
