当咱们应用 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中optionsconfigurations与ng build雷同。

在此基础上又去查了一下ng build 和 ng serve 的区别

ng build 构建应用程序并进行部署。

ng serve 构建、部署、服务并每次监督您的代码更改。如果在代码中发现任何更改,它会主动构建并提供该代码。