Webpack Integration in Angular2 App

Question

Ich versuche Webpack in meiner Angular2 App zu verwenden. Aber ich erhalte immer diese Fehlermeldung:

decorators.js:164 Uncaught reflect-metadata shim is required when using class decorators 

Im Folgenden finden Sie die Ordnerstruktur.

. 
    ├── db.json 
    ├── index.html 
    ├── karma.conf.js 
    ├── karma-test-shim.js 
    ├── LICENSE 
    ├── listing.md 
    ├── package.json 
    ├── README.md 
    ├── src 
    │   ├── app.component.ts 
    │   ├── assets 
    │   │   └── stylesheets 
    │   │    └── style.css 
    │   ├── components 
    │   │   ├── employee-detail.component.spec.ts 
    │   │   ├── employee-detail.component.ts 
    │   │   ├── employee-edit-form.component.spec.ts 
    │   │   ├── employee-edit-form.component.ts 
    │   │   ├── employee-form.component.spec.ts 
    │   │   ├── employee-form.component.ts 
    │   │   ├── list.component.spec.ts 
    │   │   └── list.component.ts 
    │   ├── main.ts 
    │   ├── models 
    │   │   ├── employee.spec.ts 
    │   │   └── employee.ts 
    │   ├── pages 
    │   │   ├── app.component.html 
    │   │   ├── employee-detail.component.html 
    │   │   ├── employee-edit-form.component.html 
    │   │   ├── employee-form.component.html 
    │   │   └── employee-list.component.html 
    │   ├── services 
    │   │   ├── employee-delete-service.component.spec.ts 
    │   │   ├── employee-delete-service.component.ts 
    │   │   ├── employee-detail-service.component.spec.ts 
    │   │   ├── employee-detail-service.component.ts 
    │   │   ├── employee-edit-form-service.component.ts 
    │   │   ├── employee-form-service.component.spec.ts 
    │   │   ├── employee-form-service.component.ts 
    │   │   ├── employee-list-service.component.spec.ts 
    │   │   └── employee-list-service.component.ts 
    │   └── tsconfig.json 
    ├── typings 
    │   ├── browser 
    │   │   └── ambient 
    │   │    ├── es6-shim 
    │   │    │   └── es6-shim.d.ts 
    │   │    └── jasmine 
    │   │     └── jasmine.d.ts 
    │   ├── browser.d.ts 
    │   ├── main 
    │   │   └── ambient 
    │   │    ├── es6-shim 
    │   │    │   └── es6-shim.d.ts 
    │   │    └── jasmine 
    │   │     └── jasmine.d.ts 
    │   └── main.d.ts 
    ├── typings.json 
    └── webpack.config.js 

und darunter ist die webpack.config.js Datei

var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    "app": "./src/main" 
    }, 
    output: { 
    path: __dirname, 
    filename: "./dist/bundle.js" 
    }, 
    resolve: { 
    extensions: ['', '.js', '.ts'] 
    }, 
    devtool: 'source-map', 
    module: { 
    loaders: [ 
     { 
     test: /\.ts/, 
     loaders: ['ts-loader'], 
     exclude: /node_modules/ 
     }, 
     { test: /\.html$/, loader: 'raw-loader' } 
    ] 
    } 
}; 

Ich bin neu in Webpack und Angular2. Kann mir bitte jemand sagen, welche Konfiguration habe ich falsch?

Fortschritt

Wenn ich Tags in der index.html folgende add, alles gut laufen.

<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 

Answer 1

Angular erfordert einige Funktionen, die in den Browsern noch nicht implementiert werden und müssen daher polyfilled werden (was bedeutet, eine Implementierung für eine noch nicht vorhandene Funktion hinzufügen). So eckig wird nur ausgeführt, wenn dieser Code verfügbar ist, was passiert, wenn Sie nur die Skripte hinzufügen.

Sie können das manuelle Hinzufügen der Skripte vermeiden, indem Sie einfach die benötigte Shim- und Polyfill-Bibliothek in eine Ihrer bootstrap ts-Dateien (zB main.ts) importieren oder einfach einen zweiten Webpack-Einstiegspunkt (zB polyfills.ts) definieren Importe:

import 'es6-shim/es6-shim'; 
import 'angular2/bundles/angular2-polyfills';