Angular2 AppのWebpack統合

Question

Angular2アプリにWebpackを使用しようとしています。 はしかし、私はこのエラーを取得しておいてください。

以下

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

はフォルダ構造です。

. 
    ├── 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 

以下、私がWebpackとAngular2に新しいですwebpack.config.jsファイル

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' } 
    ] 
    } 
}; 

です。誰が私の設定が間違っているか教えていただけますか？

進捗

私はindex.htmlの中に次のタグを追加すると、すべてが正常に実行されます。

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

Answer 1

角度は（まだ既存の機能の実装を追加することを意味する）、まだブラウザで実装され、従ってpolyfilledする必要がされていないいくつかの機能を必要とします。したがって、このコードが利用可能な場合にのみ角度が実行されます。これは、スクリプトを追加するだけです。

必要なshimとpolyfillライブラリをブートストラップtsファイル（main.tsなど）のいずれかにインポートしたり、これらの2つを使って2番目のwebpackエントリポイント（たとえばpolyfills.ts）を定義するだけで手動でスクリプトを追加することを避けることができます輸入品：

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