（Angular2 RC5）ルータが遅延ロードできるSystemJSを使用して各モジュールのバンドルを作成するにはどうすればよいですか？

Question

私はAnger2 RC5アプリをrouterに変換しています。また、Angular2コンパイラ（ngc）を使用して事前にコンパイルしてから、Appファイルを連結してbundle.min.jsに連結し、外部ライブラリを別のベンダーのファイルに連結します。私はBrowserifyの「スタンドアロン」オプションを使用してUMDバンドルを作成し、それをscriptタグ付きのindex.htmlに含めるだけです。私は "System.import（ 'app'）。catch（...）」スクリプトをこの方法で除外することができます。

今やロードタイムを短縮するために、アプリケーションをバンドルで提供しながら、Angular2 moduleを遅延ロードしたいと思います。私はコードを開発ビルドにバンドルせずに作業するために怠惰な読み込みを行うことができますが、&のパッケージ化をバンドルして制作ビルドを作成するとき、それを動作させる方法はわかりません。

SystemJS builderを使用してバンドル（おそらくモジュールごとに1つ）を作成する必要があるようです。私はそこからどこへ行くべきか分からない。

ご協力いただきまして誠にありがとうございます。

Answer 1

ここで概要を説明します。

npm install systemjs-builder 

モジュールのバンドルを作成します。最も単純なケースでは、すべてのタイスクリプトがすでに変換されていると仮定して、ビルド時にtypescriptコンパイラを実行する必要はありません（systemjs plugin for typescriptをインストールして設定する必要があります）

次のbuild.jsファイルは、角度2クイックスタートチュートリアルのために：

var Builder = require('systemjs-builder'); 

var builder = new Builder; 

builder.loadConfig('systemjs.config.js').then(function() { 

    builder.bundle('app/app.module.js', 'app/app.module.bundle.js', {minify: false}); 

}); 

あなたはすでにいくつかの他のバンドルに含まれているいくつかの依存関係があるかどうかを確認するために生成app.module.bundle.jsを見てみることをお勧めします - あなたは、ビルドから除外する必要があるが、 systemjs.config.jsまたはbuild.jsのいずれか（たとえば、メイン設定がロードされた後）：

bulider.loader.config({meta: {'module-name': {build: false}}); 

遅延ロードの場合、バンドルの最初のモジュールをインポートする必要があるときに、バンドルをロードして（すべてのモジュールを登録するように）SystemJSに指示する必要があります。 According to the documentation、これは（テストしていない）systemjs.config.jsでそれを行う方法である：私はここではわからないんだけど何

System.config({ 
    bundles: { 
    'path-to-bundle': ['module1', 'module2'] 
    } 
}); 

は、モジュール名が、バンドル内のSystem.registerDynamicのコールで使用される名前と一致する必要があるかどうかである、またはソースでインポートするために使用する名前。