Webpack 2がAngular2 Typescriptアプリケーションのインポートを読み込んでいません

Question

typescriptを使用する中規模のangular2プロジェクトでwebpackを実装しようとしています。しかし、webpackを実行すると、設定ファイルで指定した2つのファイルだけがバンドルされます。それは決してインポートツリーを横断し、残りのモジュールをロードしません。

私はかなり簡単な設定をしています。私はそれを始めるためにtypescriptを束ねるだけでいいのですが。次に、さらにファイルをバンドルするように移動します。

IはVAR {}に "X"構文からインポートを{}に変更=（ "X"）を必要とする。しかし、webpackは@ angular2ディレクトリからインポートされたものを解決できないため、何百ものエラーをスローします。

webpackに 'import'ステートメントを通過させ、結果に1つ以上のファイルをバンドルさせるにはどうすればよいですか？

構成は次のとおりです。

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    context: path.join(__dirname, 'wwwroot/app'), 
    entry: { 
     'vendor': './vendor', 
     'app': './main' 
    }, 
    resolve: { 
     extensions: ['', '.ts', '.js'] 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot/built'), 
     filename: '[name].bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       exclude: /node_modules/, 
       loaders: ['ts', 'angular2-template-loader'] 
      } 
     ] 
    } 
}; 

tsconfig.json

{ 
    "compilerOptions": { 
    "noImplicitAny": false, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "module": "system", 
    "moduleResolution": "node" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot/lib", 
    "bin" 
    ] 
} 

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { HTTP_PROVIDERS } from '@angular/http'; 
import { disableDeprecatedForms, provideForms } from '@angular/forms'; 

import { AppComponent } from './app.component'; 
import { APP_ROUTER_PROVIDERS } from './app.routes'; 

bootstrap(AppComponent, [ 
    APP_ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    disableDeprecatedForms(), 
    provideForms() 
]).catch(err => console.error(err)); 

実行しているのWebPACKに

コンソール出力：

10% building modules 0/2 modules 2 active ...\src\wwwroot\app\main.tsts-loader: Using typescript@1.8.10 and C:\BitBucket\src\tsconfig.json 
8831ms building modules 
1ms sealing 
1ms optimizing 
0ms basic module optimization 
1ms module optimization 
1ms advanced module optimization 
0ms basic chunk optimization 
0ms chunk optimization 
1ms advanced chunk optimization 
0ms module and chunk tree optimization 
1ms module reviving 
0ms module order optimization 
1ms module id optimization 
1ms chunk reviving 
0ms chunk order optimization 
1ms chunk id optimization 
8ms hashing 
0ms module assets processing 
5ms chunk assets processing 
4ms additional chunk assets processing 
2ms recording 
0ms additional asset processing 
1ms chunk asset optimization 
1648ms asset optimization 
10ms emitting 
Hash: 8a864382625d5d236939 
Version: webpack 2.1.0-beta.21 
Time: 10640ms 
      Asset  Size Chunks    Chunk Names 
vendor.bundle.js 3.21 kB  0 [emitted] vendor 
    app.bundle.js 3.81 kB  1 [emitted] app 
    + 2 hidden modules 

次のように commonjsから systemから

Answer 1

てみチェンジmodule：

{ 
    "compilerOptions": { 
    "noImplicitAny": false, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "module": "commonjs", // <--- from 'system' to 'commonjs' 
    "moduleResolution": "node" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot/lib", 
    "bin" 
    ] 
}