angular12 angular.json

一、 angular.json文件时如何产生的

angular6之前我们通过脚手架（angular cli）创建的项目会有一个angular-cli.json文件，此文件是cli的相关配置信息。

在angular6+的版本后，原先的angular-cli.json就被换成了angular.json。

而其中里面的字段变化挺大了，如果不了解基本的组成，或者直接把老版本的代码 copy 到新版本的工作空间中，会导致一些很不友好的错误。

这种变化主要还是因为Angular CLI引入了 monorepo (一个空间管理多个项目) 的开发模式，即使用ng new出来的相当于一个大的工作空间，通过angular.json配置来管理各种ng generate application | library出来的项目或组件库。

二、 Angular工作空间

• Angular工作空间： 一个由Angular CLI创建，并且能够包含多个项目 或者 由单一文件导出配置的库 的目录空间。

实际上，从现在开始，Angular CLI项目开始叫做Angular 工作空间。

当你ng new一个工作空间时，默认会在根目录创建一个项目以及对应e2e项目。初始的angular.json结构如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "xxxx": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {}
    }
  },
  "defaultProject": "xxxx"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

projects： 对于工作区中的每个项目（应用或库）都会包含一个子分区，子分区是每个项目的配置项

ng则是Angular的一个命令，该命令在运行时将读取angular.json配置文件。

三、 JSON Schema

3.1 JSON Schema

JSON 格式的优点之一就是轻量，其本身并不支持写注释，所以没办法直接在文件本身中对字段进行描述。

因此，假如我们用 JSON 来做配置文件，大多数情况下都要对着文档来查看每个字段的类型、限制范围，才能编写出正确的配置。这样做不仅效率低，而且必须要自己来校验编写出的配置是否正确，一不小心就写错了。

而 JSON Schema 就是为解决此问题而生的，他本身就是 JSON 文件，用来注解和校验 JSON 文件。

3.2 编写 JSON Schema

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "$id": "https://www.code-nav.cn/latest.json",
  "title": "GameConfig",
  "description": "游戏配置",
  "type": "object",
  "properties": {
    "items": {
      "type": "array"
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

3.3 使用 JSON Schema

在要校验的数据中指定 “$schema” 字段为该校验文件地址，比如下列 JSON 配置，故意把 items 字段的值设置为 string（字符串）而非数组：

{
  "$schema": "https://www.code-nav.cn/latest.json",
  "name": "yupi",
  "difficulty": 5,
  "items": "haha"
}
1
2
3
4
5
6

这样就能检查数据是否合法啦！很多主流的编辑器（比如 JetBrains 全家桶）可以自动识别校验文件，并且检查你的 JSON 输入是否合法。也可以使用 JSON Schema validation online 等在线校验 JSON Schema 的网页来查看效果

四、 顶层字段

schematic-package：schematic-name:(object类型)，此对象包含schematic的配置选项，默认的json格式配置如下：

• @schematics/angular:component
• @schematics/angular:directive
• @schematics/angular:module
• @schematics/angular:service
• @schematics/angular:pipe
• @schematics/angular:class

五、 cli配置详解

六、 projects

"my-app": {
  "root": "",
  "sourceRoot": "src",
  "projectType": "application",
  "prefix": "app",
  "schematics": {},
  "architect": {}
}
1
2
3
4
5
6
7
8

6.1 architect配置详解

"architect": {
  "build": {},//为 ng build 命令的选项配置默认值
  "serve": {},//覆盖构建默认值，并为 ng serve 命令提供额外的服务器默认值。除了 ng build 命令的可用选项之外，还增加了与开发服务器有关的选项
  "e2e" : {},//覆盖了构建选项默认值，以便用 ng e2e 命令构建端到端测试应用
  "test": {},//会覆盖测试时的构建选项默认值，并为 ng test 命令提供额外的默认值以供运行测试
  "lint": {},//ng lint 命令配置了默认值，用于对项目源文件进行代码分析。Angular 默认的 linting 工具为 TSLint
  "extract-i18n": {},//为 ng xi18n 命令所用到的 ng-xi18n 工具选项配置了默认值，该命令用于从源代码中提取带标记的消息串，并输出翻译文件
  "server": {},//用于为使用 ng run :server 命令创建带服务器端渲染的 Universal 应用配置默认值
  "app-shell": {}//使用 ng run :app-shell 命令为渐进式 Web 应用（PWA）配置创建应用外壳的默认值
}
1
2
3
4
5
6
7
8
9
10

6.1.1 serve配置详解

{
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "sub-app2:build",
      "proxyConfig": "proxy.conf.json"
    },
    "configurations": {
      "production": {
        "browserTarget": "sub-app2:build:production"
      },
      "development": {
        "browserTarget": "sub-app2:build:development"
      }
    },
    "defaultConfiguration": "development"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6.1.1.1 configurations

配置项中，主要用来做如下工作：

• 打包文件
• 最小化多余的空白
• 删除注释和无效代码
• 重写代码，以使用简短、混乱的名称（最小化）

通常build 是用production的

七、样例

{
  // 注解和验证JSON数据格式的工具，比如可以自动填充属性或属性值
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  // 该配置文件的版本 ，指明了Angular 工作空间 概要的版本
  "version": 1,
  // 用来创建析工程的位置。绝对路径或相对于工作区目录的路径。 使用 ng generate application myDemo, 就会在 angular-dave/projects 目录下生成 myDemo 项目。 ps：新建项目是 ng new angular-dave；ng g application myDemo 是在项目angular-dave下生成myDemo子项目，不是一回事
  "newProjectRoot": "projects",
  // 这个属性包含了工作空间中所有项目的配置信息。 如果如上生成 myDemo, 那么在这里还有与 angular-dave 同一层级的 myDemo 的配置
  // 对于工作区中的每个项目（应用或库）都会包含一个子分区，子分区中是每个项目的配置项。这个属性包含了工作空间中所有项目的配置信息。
  "projects": {
    "angular-dave": {
      // 该属性有 application 和 library 两种选择，应用可以在浏览器中独立运行，而库则不行
      "projectType": "application",
      // 该项目的根文件夹，相对于工作区文件夹的路径。初始应用的值为空，因为它位于工作区的顶层
      // 如果如上生成 myDemo, 那么 myDemo 的如下几个属性值路径会有所不同
      "root": "",
      // 一组原理图（schematic），它可以为该项目自定义 ng generate 子命令的默认选项。
      "schematics": {
        // 在项目级别统一进行配置，比如在这里，配置了所有的 component 都使用 scss
        // 可试着查看其它的配置项，因为有 $schema, 会帮你自动补全相关属性
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      // 项目源文件的根文件夹
      "sourceRoot": "src",
      // 当CLI创建 `component`或者`directive`时，使用该属性 来区别他们
      "prefix": "app",
      // 为本项目的各个构建器目标配置默认值
      "architect": {
        // 为 ng build 命令的选项配置默认值
        "build": {
          // 每个目标对象都指定了该目标的 builder，它是 architect (建筑师)所运行工具的 npm 包
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-dave",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            // 包含一些用于添加到项目的全局上下文中的静态文件路径
            // 每个 build 目标配置都可以包含一个 assets 数组，它列出了当你构建项目时要复制的文件或文件夹。
            // 默认情况下，会复制 src/assets/ 文件夹和 src/favicon.ico
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            // 包含一些要添加到项目全局上下文中的样式文件(即全局样式)
            "styles": [
              "src/styles.scss"
            ],
            // 包含一些 JavaScript 脚本文件，用于添加到项目的全局上下文中。 这些脚本的加载方式和在 index.html 的