Angular 2 - Gelişmiş Yapılandırma
Bu bölümde, Angular 2 projesinin parçası olan diğer yapılandırma dosyalarına bakacağız.
tsconfig.json
Bu dosya, Angular JS projesi için kullanılan TypeScript ile ilgili seçenekleri vermek için kullanılır.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
Aşağıda, yukarıdaki kodla ilgili dikkat edilmesi gereken bazı önemli noktalar verilmiştir.
Derlemenin hedefi es5'tir ve bunun nedeni, çoğu tarayıcının yalnızca ES5 yazı tipini anlayabilmesidir.
SourceMap seçeneği, hata ayıklama sırasında yararlı olan Harita dosyalarını oluşturmak için kullanılır. Bu nedenle, geliştirme sırasında bu seçeneği doğru tutmak iyidir.
"EmitDecoratorMetadata": true ve "experimentalDecorators": true, Angular JS dekoratörleri için gereklidir. Yerinde değilse, Angular JS uygulaması derlenmeyecektir.
package.json
Bu dosya Angular 2 projesi hakkında bilgiler içermektedir. Dosyadaki tipik ayarlar aşağıdadır.
{
"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": {}
}
Yukarıdaki kod hakkında dikkat edilmesi gereken bazı önemli noktalar -
İki tür bağımlılık vardır, birincisi bağımlılıklar ve sonra dev bağımlılıkları vardır. Geliştirme süreci sırasında geliştiriciler gereklidir ve diğerlerinin uygulamayı çalıştırması gerekir.
"Build: watch": "tsc -p src / -w" komutu, daktilo dosyalarındaki değişiklikleri arayarak arka planda daktilo yazısını derlemek için kullanılır.
systemjs.config.json
Bu dosya, Angular JS uygulaması için gerekli sistem dosyalarını içerir. Bu, gerekli tüm komut dosyalarını html sayfalarına bir komut dosyası etiketi eklemeye gerek kalmadan yükler. Tipik dosyalar aşağıdaki koda sahip olacaktır.
/**
* 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);
Yukarıdaki kod hakkında dikkat edilmesi gereken bazı önemli noktalar -
'npm:': 'node_modules /', projemizdeki tüm npm modüllerinin bulunduğu konumu söyler.
Uygulamanın eşlenmesi: 'app', tüm uygulama dosyalarımızın yüklendiği klasöre bildirir.