Angular 2-高度な設定

この章では、Angular 2プロジェクトの一部である他の構成ファイルを見ていきます。

tsconfig.json

このファイルは、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ファイルを生成するために使用されます。したがって、開発中は、このオプションをtrueのままにしておくことをお勧めします。
「emitDecoratorMetadata」：trueおよび「experimentalDecorators」：trueは、Angular JSデコレーターに必要です。適切に配置されていない場合、Angular JSアプリケーションはコンパイルされません。

package.json

このファイルには、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": {}
}

上記のコードについて注意するいくつかのキーポイント-

依存関係には2つのタイプがあります。最初は依存関係で、次にdev依存関係があります。開発プロセスでは開発プロセスが必要になり、アプリケーションを実行するには開発プロセスが必要になります。
"build：watch"： "tsc -p src/-w"コマンドは、typescriptファイルの変更を探すことにより、バックグラウンドでtypescriptをコンパイルするために使用されます。

systemjs.config.json

このファイルには、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’のマッピングは、すべてのアプリケーションファイルが読み込まれるフォルダーを示します。

Angular2-advanced-configuration

Angular 2-高度な設定

tsconfig.json

package.json

systemjs.config.json

目次