Useful SystemJS config for Angular2 with "packageConfigPaths" option.

systemjs.config.js

System.config({
  // baseURL: '/', // あるとないとでどう変わるかよくわからない。
  // defaultJSExtensions: true, // 拡張子.jsを省略する。
  transpiler: false, // on the flyでトランスパイルするときに設定する。
  paths: {
    '*': 'node_modules/*', // import {...} from 'hoge' と書くと node_modules/hoge を参照するようになる。
    'root:*': '/*',
  },
  packageConfigPaths: [ // package.jsonのmainプロパティがあればjsファイルを自動で参照する。
    '*/package.json', // ./node_modules/*/package.json と書くのと同じ。lodash等のマッピングに使われる。
    '@*/*/package.json', // ./node_modules/@*/*/package.json と書くのと同じ。@angular,@ngrx等のマッピングに使われる。
  ],
  map: {
    'app': 'root:.dest', // path:{'*':'node_modules/*'} の設定があるのでroot指定が必要。
    'rxjs/Rx': 'rxjs/bundles/Rx.umd.js', // node_modules/rxjs/Rx/package.json は存在しないので独自にmap定義する必要がある。
  },
  packages: {
    'app': { main: 'main' }, // System.import('app') と書くと .dest/main.js を参照する。
    '@angular/core': { main: 'bundles/core.umd' }, // node_modules/@angular/core/bundles/core.umd.js を参照する。
    '@angular/common': { main: 'bundles/common.umd' },
    '@angular/compiler': { main: 'bundles/compiler.umd' },
    '@angular/platform-browser': { main: 'bundles/platform-browser.umd' },
    '@angular/platform-browser-dynamic': { main: 'bundles/platform-browser-dynamic.umd' },
    'symbol-observable': { main: 'index', map: 'symbol-observable' }, // node_modules/symbol-observable/index.js を参照する。
  }
});

/*
  packagesの'@angular/core','@angular/common'等は省略することもできるが、
  その場合はindex.jsを参照することになり数百ファイルの読み込みが発生するため非推奨。
  またmapに'rxjs/Rx'の定義をしているためimport {...} from 'rxjs/Rx'と書いても大量ファイル読み込みは発生しない。
  'symbol-observable'の設定はpackage.jsonにmainプロパティが存在しないため仕方なく書いている。
*/