Webpack 2 lädt keine Importe für Angular2 Typescript-Anwendung

Question

Ich versuche, Webpack auf einem mittelgroßen angle2-Projekt zu implementieren, das Typoskript verwendet. Aber wenn ich webpack laufe, bündelt es nur die 2 Dateien, die ich in der Konfigurationsdatei angegeben habe. Es durchläuft niemals den Importbaum und lädt die restlichen Module.

Ich habe eine ziemlich einfache Konfiguration eingerichtet. Ich würde es gerne bekommen, wenn ich zuerst das Typoskript bündle. Dann werde ich weitere Dateien bündeln.

Wenn ich ändere den import {} von "x" Syntax var {} = erfordern ("x"). webpack funktioniert jedoch hunderte von Fehlern, da es nichts aus dem @ angular2-Verzeichnis importierten lösen kann.

Wie bekomme ich Webpack, um durch die "Import" -Anweisungen zu gehen und mehr als nur eine Datei in das Ergebnis zu bündeln?

Meine Konfiguration ist wie folgt.

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)); 

Console Ausgang läuft 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 

Answer 1

Versuchen Änderung modulesystem-commonjs wie folgt:

{ 
    "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" 
    ] 
}