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 或 libraryprefix创建子项目时，用这个属性来区分当前子项目是 component、directive、lib,或其他,当cli创建时会确定schematicsSchematics 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”}