Angular 2 - Cấu hình nâng cao
Trong chương này, chúng ta sẽ xem xét các tệp cấu hình khác nằm trong dự án Angular 2.
tsconfig.json
Tệp này được sử dụng để cung cấp các tùy chọn về TypeScript được sử dụng cho dự án Angular JS.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
Sau đây là một số điểm chính cần lưu ý về mã trên.
Mục tiêu cho việc biên dịch là es5 và đó là bởi vì hầu hết các trình duyệt chỉ có thể hiểu được bảng chữ ES5.
Tùy chọn Bản đồ nguồn được sử dụng để tạo tệp Bản đồ, rất hữu ích khi gỡ lỗi. Do đó, trong quá trình phát triển, tốt nhất là nên giữ tùy chọn này là đúng.
Bắt buộc phải có "releaseDecoratorMetadata": true và "ExperimentDecorators": true cho các trình trang trí Angular JS. Nếu không đúng vị trí, ứng dụng Angular JS sẽ không biên dịch.
package.json
Tệp này chứa thông tin về dự án Angular 2. Sau đây là các cài đặt điển hình trong tệp.
{
"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": {}
}
Một số điểm chính cần lưu ý về mã trên -
Có hai loại phụ thuộc, đầu tiên là phụ thuộc và sau đó là phụ thuộc dev. Các nhà phát triển được yêu cầu trong quá trình phát triển và những người khác cần thiết để chạy ứng dụng.
Lệnh "build: watch": "tsc -p src / -w" được sử dụng để biên dịch bảng chữ trong nền bằng cách tìm kiếm các thay đổi trong tệp bảng chữ.
systemjs.config.json
Tệp này chứa các tệp hệ thống cần thiết cho ứng dụng Angular JS. Thao tác này tải tất cả các tệp kịch bản cần thiết mà không cần thêm thẻ tập lệnh vào các trang html. Các tệp thông thường sẽ có mã sau.
/**
* 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);
Một số điểm chính cần lưu ý về mã trên -
'npm:': 'node_modules /' cho biết vị trí trong dự án của chúng tôi, nơi đặt tất cả các mô-đun npm.
Ánh xạ ứng dụng: 'ứng dụng' cho biết thư mục nơi tất cả các tệp ứng dụng của chúng tôi được tải.