angular2.0 筆記 - 02
angular2.0 筆記
1.angular-cli 之 angular.json 配置表引數說明
簡單建立一個demo專案
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-test
如果想單獨執行某個子專案時,可以執行
ng serve project-name-test
如果子專案不在projects內,執行 ng serve [project-name] 就會包一個錯
The serve command requires to be run in an Angular project, but a project definition could not be found.
建立一個子專案,可以執行
ng generate application project-name
而且,每建立一個子專案,都會有一個[project-name]-e2e的子專案在projects裡面
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" }