在本章中,我们将查看作为Angular 2项目一部分的其他配置文件.
此文件用于提供有关用于Angular JS项目的TypeScript的选项.
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true } }
以下是关于上述代码的一些要点.
编译的目标是es5,这是因为大多数浏览器只能理解ES5打字稿.
sourceMap选项用于生成Map文件,这在debuggi时很有用NG.因此,在开发期间,最好将此选项保持为真.
"emitDecoratorMetadata":true和"experimentalDecorators":Angular JS装饰器需要true .如果不到位,Angular JS应用程序将无法编译.
这文件包含有关Angular 2项目的信息.以下是文件中的典型设置.
{ "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "build": "tsc -p src/", "build:watch": "tsc -p src/ -w", "build:e2e": "tsc -p e2e/", "serve": "lite-server -c=bs-config.json", "serve:e2e": "lite-server -c=bs-config.e2e.json", "prestart": "npm run build", "start": "concurrently npm run build:watch npm run serve", "pree2e": "npm run build:e2e", "e2e": "concurrently npm run serve:e2e npm run protractor --killothers --success first", "preprotractor": "webdriver-manager update", "protractor": "protractor protractor.config.js", "pretest": "npm run build", "test": "concurrently npm run build:watch karma start karma.conf.js", "pretest:once": "npm run build", "test:once": "karma start karma.conf.js --single-run", "lint": "tslint ./src/**/*.ts -t verbose" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/common": "~2.4.0", "@angular/compiler": "~2.4.0", "@angular/core": "~2.4.0", "@angular/forms": "~2.4.0", "@angular/http": "~2.4.0", "@angular/platform-browser": "~2.4.0", "@angular/platform-browser-dynamic": "~2.4.0", "@angular/router": "~3.4.0", "angular-in-memory-web-api": "~0.2.4", "systemjs": "0.19.40", "core-js": "^2.4.1", "rxjs": "5.0.1", "zone.js": "^0.7.4" }, "devDependencies": { "concurrently": "^3.2.0", "lite-server": "^2.2.2", "typescript": "~2.0.10", "canonical-path": "0.0.2", "tslint": "^3.15.1", "lodash": "^4.16.4", "jasmine-core": "~2.4.1", "karma": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~4.0.14", "rimraf": "^2.5.4", "@types/node": "^6.0.46", "@types/jasmine": "2.5.36" }, "repository": {} }
一些关键点注意上面的代码 :
有两种类型的依赖关系,首先是依赖关系,然后是dev依赖.开发过程中需要开发者,运行应用程序需要其他开发者.
"build:watch":"tsc -p src/-w"命令用于通过查找打字稿文件中的更改来在后台编译打字稿.
此文件包含Angular JS应用程序所需的系统文件.这将加载所有必需的脚本文件,而无需向html页面添加脚本标记.典型的文件将包含以下代码.
/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config ({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this);
关于上述代码的一些关键要点 :
'npm:':'node_modules/'告诉我们项目中所有npm模块所在的位置.
app的映射:'app'告诉我们加载所有应用程序文件的文件夹.