angular - Webpack 2 not loading imports for Angular2 Typescript application -

i'm trying implement webpack on medium size angular2 project uses typescript. when run webpack bundles 2 files specify in config file. never traverses through import tree , loads rest of modules.

i've got simple configuration set up. i'd bundling typescript start with. i'll move onto bundling more files.

when change import {} "x" syntax var {} = require("x"). webpack works, however, throws hundreds of errors cannot resolve imported @angular2 directory.

how webpack traverse through 'import' statements , bundle more 1 file result?

my configuration follows.

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 } '@angular/platform-browser-dynamic'; import { http_providers } '@angular/http'; import { disabledeprecatedforms, provideforms } '@angular/forms';  import { appcomponent } './app.component'; import { app_router_providers } './app.routes';  bootstrap(appcomponent, [     app_router_providers,     http_providers,     disabledeprecatedforms(),     provideforms() ]).catch(err => console.error(err)); 

console output on running webpack:

10% building modules 0/2 modules 2 active ...\src\wwwroot\app\main.tsts-loader: using typescript@1.8.10 , 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 , 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 

try change module system commonjs follow:

{   "compileroptions": {     "noimplicitany": false,     "removecomments": false,     "sourcemap": true,     "target": "es5",     "emitdecoratormetadata": true,     "experimentaldecorators": true,     "module": "commonjs", // <--- 'system' 'commonjs'     "moduleresolution": "node"   },   "exclude": [     "node_modules",     "wwwroot/lib",     "bin"   ] }