typescript2.0 - TypeScript angular 1.5 WebPack とコード分割 system.import

Question

コード分​​割を構成しようとしています

• 角度1.5
• タイプスクリプト 2.x
• ウェブパック2

基本的なセットアップ: vscode typescript コンパイラを使用して、ソース フォルダーと同じフォルダー構造を持つ出力フォルダーに ts ファイルをコンパイルします。

\common
  myservice.ts
\testapp
  pageonecomp.ts
  pagetwocomp.ts
  testapp.ts

webpack のエントリ ポイントは testapp\testapp.js で、これには以下が含まれます

System.import('../common/myservice').then((myservice)=>{
    angular.module('testapp',['myservice'])
       .component( ... )
       .component( ... )
});

現時点では、pageonecomp.ts も pagetwocomp.ts も myservice.ts から何も使用しません。コンパイルして webpack 2 を実行すると、次のように表示されます。

                  Asset     Size  Chunks             Chunk Names
      0.bundle.js  1.17 kB       0  emitted
testapp.bundle.js  8.74 kB       1  emitted  testapp      

0.bundle.js には MyService が含まれ、testapp.bundle.js には pageonecomp、pagetwocomp、および testapp 角度モジュールが含まれています。

しかし今、pageonecomp.ts 内の myservice.ts からエクスポートされた MyService タイプを使用したいと考えています。typescript が MyService クラスでコード補完を提供できるようにするには、 pageonecomp.ts に MyService タイプをインポートする必要があります。

import {MyService} from '../common/myservice';

class PageOneComp {
  static $inject=['myservice'];
  constructor(private myservice:MyService) {}
  doSomething() { myservice.doSomething(); } // intellisense works
}

しかし、ここで webpack を実行すると、出力からわかるようにコード分割が機能しなくなります。

            Asset     Size  Chunks             Chunk Names
   testapp.bundle.js  7.53 kB       0  [emitted]  testapp

MyService クラスが testapp バンドルに含まれるようになりましたが、これは望ましくありません...

これを機能させる方法を知っている人はいますか？目標は、webpack が import ステートメントのみに基づいてバンドルを作成し、バンドルに何を入れるかを決定し、System.import でコード分割が発生する場所を指定することです。

注：現時点では、追加のAngularモジュールの動的ロードは必要ありません。複数のエントリポイント（複数の小さなスパ）のバンドルと、それらのスパ間で共有されるいくつかの一般的なバンドルを作成しようとしています.