[TOC]
Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。需要快速了解Angular的开发,首先就要从angular.json文件开始学习。
angular.json
angular.json文件提供了工作区的配置和具体项目的默认配置,供Angular CLI中的构建工具和开发工具使用。此配置中提供的路径值是相对于工作区根目录的。
- version:该配置文件的版本。
- newProjectRoot:用来创建新工程的位置。绝对路径或相对于工作区目录的路径。
- defaultProject:当命令中没有指定参数时,要使用的默认工程名。当你用 ng new 在新的工作区中创建新应用时,该应用就会一直作为此工作区的默认项目,除非你到这里修改它。
- schematics:一组原理图,用于定制 ng generate 子命令在本工作区中的默认选项。
- projects:对于工作区中的每个项目(应用或库)都会包含一个子分区,子分区中是每个项目的配置项。
项目配置选项
| 属性 | 说明 |
|---|---|
| root | 该项目的根文件夹,相对于工作区文件夹的路径。初始应用的值为空,因为它位于工作区的顶层。 |
| sourceRoot | 该项目源文件的根文件夹。 |
| projectType | “application” 或 “library” 之一。应用可以在浏览器中独立运行,而库则不行。 |
| prefix | Angular 所生成的选择器的前缀字符串。可以自定义它,以作为应用或功能区的标识。 |
| schematics | 一组原理图(schematic),它可以为该项目自定义 ng generate 子命令的默认选项。 |
| architect | 为本项目的各个构建器目标配置默认值。 |
配置architect
angular.json 的 architect 部分包含一组建筑目标。很多目标都对应于运行它们的 CLI 命令。使用 ng run 命令可以运行一些额外的预定义目标,并可以定义自己的目标。
每个目标对象都指定了该目标的 builder,它是建筑师所运行工具的 npm 包。此外,每个目标都有一个 options 部分,用于配置该目标的默认选项,configurations 部分可以为目标命名并指定备用配置。
"architect": {
"build": { },
"serve": { },
"e2e" : { },
"test": { },
"lint": { },
"extract-i18n": { },
"server": { },
"app-shell": { }
}
- architect/build 节会为 ng build 命令的选项配置默认值。
- architect/serve 节会覆盖构建默认值,并为 ng serve 命令提供额外的服务器默认值。除了 ng build 命令的可用选项之外,还增加了与开发服务器有关的选项。
- architect/e2e 节覆盖了构建选项默认值,以便用 ng e2e 命令构建端到端测试应用。
- architect/test 节会覆盖测试时的构建选项默认值,并为 ng test 命令提供额外的默认值以供运行测试。
- architect/lint 节为 ng lint 命令配置了默认值,用于对项目源文件进行代码分析。Angular 默认的 linting 工具为 TSLint。
- architect/extract-i18n 节为 ng xi18n 命令所用到的 ng-xi18n 工具选项配置了默认值,该命令用于从源代码中提取带标记的消息串,并输出翻译文件。
- architect/server 节用于为使用 ng run
:server 命令创建带服务器端渲染的 Universal 应用配置默认值。 - architect/app-shell 部分使用 ng run
:app-shell 命令为渐进式 Web 应用(PWA)配置创建应用外壳的默认值。
构建目标(build)
architect/build 节会为 ng build 命令的选项配置默认值。它具有下列顶层属性。
| 属性 | 说明 |
|---|---|
| builder | 用于构建此目标的构建工具的 npm 包。默认为 @angular-devkit/build-angular:browser,它使用的是 webpack 打包器。 |
| options | 包含构建选项的默认值,当没有指定命名的备用配置时使用。 |
| configurations | 定义并命名针对不同目标的备用配置。它为每个命名配置都包含一节,用于设置该目标环境的默认选项。 |
额外配置选项
| 选项属性 | 说明 |
|---|---|
| assets | 一个对象,包含一些用于添加到项目的全局上下文中的静态文件路径。它的默认路径指向项目的图标文件及项目的 assets 文件夹。 |
| styles | 一个对象,包含一些要添加到项目全局上下文中的样式文件。Angular CLI 支持 CSS 导入和所有主要的 CSS 预处理器: sass/scss、less 和 stylus。 |
| stylePreprocessorOptions | 一个对象,包含要传给样式预处理器的选项”值-对”。 |
| scripts | 一个对象,包含一些 JavaScript 脚本文件,用于添加到项目的全局上下文中。这些脚本的加载方式和在 index.html 的 |
