angular2.0 筆記 - 02

時間 2019-12-06

標籤 angular2.0 angular 筆記欄目 AngularJS 简体版

原文原文鏈接

angular2.0 筆記

1.angular-cli 之 angular.json 配置表參數說明

簡單建立一個demo項目css

ng new project-demo

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {},
        "lint": {}
      }
    },
    "project-name-test": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {},
        "lint": {}
      }
    }
  },
  "defaultProject": "project-demo"
}

上面的json是一個刪除了部份內容的angular.json僅用於講解使用，後面會給出完整json

參數	做用
$schema	關聯了JSON Schema在angular CLI 的執行config.json文件
version	項目版本
newProjectRoot	這個屬性定義了CLI建立的新的內部應用和庫放置的位置，默認值爲'projects'
projects	這個屬性，我的以爲有必要認真講一下。此屬性包含了本項目中全部的子項目的配置信息。稍後單獨拿這個屬性詳細講解其注意點。
defaultProject	屬性表示該項目的名字

2.projects 下一級屬性名是子項目的名稱

子項目名稱的做用，能夠用於ng 命令執行
好比上面的json有一個子項目名字 project-name-testhtml

若是想單獨運行某個子項目時，能夠執行
ng serve project-name-testnode

若是子項目不在projects內，執行 ng serve [project-name] 就會包一個錯
The serve command requires to be run in an Angular project, but a project definition could not be found.json

建立一個子項目，能夠執行
ng generate application project-namesegmentfault

並且，每建立一個子項目，都會有一個[project-name]-e2e的子項目在projects裏面angular2

3.projects 子項目裏面的屬性說明

屬性	做用
root	指定了子項目文件的根文件夾，多是空值
sourceRoot	子項目源文件目錄位置
projectType	子項目類型， `application` 或 `library`
prefix	建立子項目時，用這個屬性來區分當前子項目是 `component`、`directive`、`lib`,或其餘,當cli建立時會肯定
schematics	`Schematics packages` 配置(本人暫時還不知道其具體做用)
architect	此屬性包含了項目的一些命令，好比 `build`/`serve`/`test`/`lint` 或者自定義命令 `extract-i18n`

以上部分屬性內容參考自 Alfred的 angular.json參數詳解

項目例子 json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/project-demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "project-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-demo: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/**"
            ]
          }
        }
      }
    },
    "project-demo-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "project-demo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project-demo:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "project-demo-two": {
      "root": "projects/project-demo-two/",
      "sourceRoot": "projects/project-demo-two/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/project-demo-two",
            "index": "projects/project-demo-two/src/index.html",
            "main": "projects/project-demo-two/src/main.ts",
            "polyfills": "projects/project-demo-two/src/polyfills.ts",
            "tsConfig": "projects/project-demo-two/tsconfig.app.json",
            "assets": [
              "projects/project-demo-two/src/favicon.ico",
              "projects/project-demo-two/src/assets"
            ],
            "styles": [
              "projects/project-demo-two/src/styles.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/project-demo-two/src/environments/environment.ts",
                  "with": "projects/project-demo-two/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project-demo-two:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "project-demo-two:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-demo-two:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/project-demo-two/src/test.ts",
            "polyfills": "projects/project-demo-two/src/polyfills.ts",
            "tsConfig": "projects/project-demo-two/tsconfig.spec.json",
            "karmaConfig": "projects/project-demo-two/karma.conf.js",
            "styles": [
              "projects/project-demo-two/src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "projects/project-demo-two/src/favicon.ico",
              "projects/project-demo-two/src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/project-demo-two/tsconfig.app.json",
              "projects/project-demo-two/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "project-demo-two-e2e": {
      "root": "projects/project-demo-two-e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/project-demo-two-e2e/protractor.conf.js",
            "devServerTarget": "project-demo-two:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project-demo-two:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "projects/project-demo-two-e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "project-demo"
}