Angular 配置文件常见配置注解

以你之姓@ 2021-09-17 07:54 606阅读 0赞

### 前言 ###

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的默认值
            }
        }
    }