angular.json

一 angular.json的字段讲解

1 前序

1. angular.json 是用于管理angular项目环境的。
2. angular.json中所有字段表示的意思都在$schema 文件中，一般被放置在angular.json文件的第一行。

 "$schema": "http://json-schema.org/draft-07/schema"

2 字段讲解

1 $schema

指向一个 JSON Schema 文件，这个文件描述了angular.json所有的字段以及约束。

2 version

设置版本

3 newProjectRoot

新建项目所在的路径

4 projects

用于管理所有项目，其中的一个项目如下

"projects": {
    
    
    "pumkin-web": {
    
    
      "projectType": "application",
      "schematics": {
    
    
        "@schematics/angular:application": {
    
    
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
    }
  },

1 root

代表跟目录也就是项目所在的位置，通常为"";

2 sourceRoot

项目源码所在目录，默认为src

3 projectType

标示这个项目是application还是library。

4 prefix

使用ng generate component生成组件时的前缀。

5 schematics

用于简化cli的命令，如简化生成组件的命令：

{
    
    
    "schematics": {
    
    
        "@schematics/angular:component": {
    
    
             "styleext": "less",
             "spec": false
        }
    }
}

此外这些是CLI预设的几组选项

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

5 architect

1 前序

1. 在angular.json中有一个architect字段，包含了一些项目自动化相关的命令，如运行，编译，测试等等，其中默认有build、serve、test、extract-i18n。
2. 第二点中build每个字段(build、serve、test、extract-i18n)都有3个子字段属性builder、options、configurations。
3. 其中builder代表要执行的内置程序，options代表builder要配置的配置项，调用不同的程序，需要不同的配置项；configrations代表这个命令的多种调用模式，在此配置里，我们可以定义不同的别名，在使用的时候手动选择不同的模式。

2 总览

{
    
    
    "architect":{
    
    
        "build":{
    
    },
        "serve":{
    
    },
        "extract-i18n":{
    
    },
        "test":{
    
    },
        "lint":{
    
    }
    }
}

3 以build为例

"build": {
    
    
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
    
    
            "outputPath": "dist/pumkin-web",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
    
    
            "production": {
    
    
              "budgets": [
                {
    
    
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
    
    
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
    
    
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
    
    
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },

二 proxy.conf.json 统一前端的请求地址

2 配置proxy.conf.json

1. architect->serve然后在serve中添加如下

"serve": {
    
    
  "options":{
    
    
    "browserTarget": "pumkin-web:build",
    "proxyConfig": "proxy.conf.json"
  },
},

3 创建proxy.conf.json

1. 创建一个与angular.json同级的以.json结尾的配置文件。
2. 在文件中加入如下。
3. /frontkit/service中把fromkit修改为对应的项目名即可。
4. target改为统一的前端请求地址

{
    
    
  "/frontkit/service": {
    
    
    "target": "http://127.0.0.1:9000",
    "secure": false
  }
}