Angular 配置文件常见配置注解

前言

    Angular CLI项目中的配置文件angular-cli.json 从6.x以后就用angular.json替代了angular-cli.json。
    angular.json, 这个文件是整个项目的概要，包含了 不同的环境，测试、代理、第三方资源 和 众多内置工具。

    两个版本中的angular.json的项目结构发生了比较大的变化。

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json", //angular-cli.json规则文件
  "version": 1, // 指明了Angular 工作空间 概要的版本。
  "newProjectRoot": "projects",//定义了由CLI创建的新的内部应用和库放置的位置。默认值为`projects`
  "projects": {  //包含了工作空间中所有项目的配置信息。
    "angularTest": {  //项目配置详情(项目名称)
      "root": "", //指定了项目文件的根文件夹，可能为空，但是它指定了一个特定的文件夹。
      "sourceRoot": "src",//指定了项目源文件位置
      "projectType": "application",//表明了 项目的状态 是 `appliaction`还是`library`。
      "prefix": "app",//当CLI创建 `component`或者`directive`时，使用该属性来区别他们。组件selector默认前缀
      "schematics": {},
      "architect": {//自定义自动化命令
        "build": { //build模块配置
          "builder": "@angular-devkit/build-angular:browser",//build执行的自动化程序
          "options": {
            "outputPath": "dist/angularTest",//编译后的输出目录，默认为dist
            "index": "src/index.html", //指定首页文件，默认值为"index.html"
            "main": "src/main.ts", //指定应用的入门文件
            "polyfills": "src/polyfills.ts",// 指定polyfill文件
            "tsConfig": "src/tsconfig.app.json",//指定tsconfig文件
            "assets": [ //记录资源文件夹，构建时复制到`outDir`指定的目录
              "src/favicon.ico",//网站ico图标
              "src/assets"
            ],
            "styles": [//引入全局样式，构建时会打包进来，常用于第三方库引用样式
              "src/styles.css"
            ],
            "scripts": [ ]// 引入全局脚本，构建时会打包进来，常用语第三方库引入的脚本
          },
          "configurations": {//代表这个命令的多种调用模式 
            "production": {//打包命令-–prod()的配置
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {//serve模块配置
          "builder": "@angular-devkit/build-angular:dev-server",//serve执行的自动化程序
          "options": {
            "browserTarget": "angularTest:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angularTest:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angularTest:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "angularTest-e2e": { //项目测试详细配置
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angularTest:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angularTest:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angularTest"//当使用CLI命令时，`defaultProject`代表显示的名字。
}

angular-cli.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",//angular-cli.json规则文件
    "project": {
        "name": "soft-h"                      //项目名称
         "ejected": false                     // 标记该应用是否已经执行过eject命令把webpack配置释放出来
    },
    "apps": [{
        "root": "src",                        //源码根目录
        "outDir": "dist",                     //编译后的输出目录，默认为dist
        "assets": [                           //记录资源文件夹，构建时复制到`outDir`指定的目录
            "assets",
            "logo.ico"                        //网站ico图标
        ],
        "index": "index.html",                //指定首页文件，默认值为"index.html"
        "main": "main.ts",                    //指定应用的入门文件
        "polyfills": "polyfills.ts",          // 指定polyfill文件
        "test": "test.ts",                    //指定测试入门文件
        "tsconfig": "tsconfig.app.json",      //指定tsconfig文件
        "testTsconfig": "tsconfig.spec.json", // 指定TypeScript单测脚本的tsconfig文件
        "prefix": "app",                      //使用ng g 命令时，自动为selector元数据的值添加的前缀名
        "styles": [                           //引入全局样式，构建时会打包进来，常用于第三方库引用样式
            "../node_modules/bootstrap/dist/css/bootstrap.css"
        ],
        "scripts": [                          // 引入全局脚本，构建时会打包进来，常用语第三方库引入的脚本
            "../node_modules/jquery/dist/jquery.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.js"
        ],
        "environmentSource": "environments/environment.ts",  //基础环境配置
        "environments": {                     //子环境配置文件
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
        }
    }],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [{
            "project": "src/tsconfig.app.json",
            "exclude": "**/node_modules/**"
        },
        {
            "project": "src/tsconfig.spec.json",
            "exclude": "**/node_modules/**"
        },
        {
            "project": "e2e/tsconfig.e2e.json",
            "exclude": "**/node_modules/**"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {                             //执行  ng g 命令时的一些默认值
       "styleExt": "sass",                    //默认生成的样式文件后缀名
        "component": {
         "flat": false,              // 生成组件时是否新建文件夹包装组件文件，默认为false（即新建文件夹）
         "spec": true,                        // 是否生成spec文件，默认为true
         "inlineStyle": false,                // 新建时是否使用内联样式，默认为false
          "inlineTemplate": false,            // 新建时是否使用内联模板，默认为false
          "viewEncapsulation": "Emulated",    // 指定生成的组件的元数据viewEncapsulation的默认值
           "changeDetection": "OnPush",       // 指定生成的组件的元数据changeDetection的默认值
        }
    }
}