在Angular2 App中集成Webpack

我想在我的Angular2應用中使用Webpack。不過，我不斷收到此錯誤：在Angular2 App中集成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.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' } 
    ] 
    } 
};

我是新來Webpack和Angular2。任何人都可以告訴我我錯了什麼配置？

進展

當我添加下面的index.html的標籤，一切運行正常。

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

來源

2016-04-26 abhinavmsra

角需要尚未在瀏覽器中實現，並且因此需要被polyfilled（這意味着添加實施一個尚未現有功能）的某些功能。所以只有當這個代碼可用時，angular纔會運行，當你只是添加腳本時會發生這種情況。

您可以避免手動添加腳本，方法是隻將需要的填充和填充庫導入到其中一個引導文件（例如main.ts）中，或者通過簡單地定義第二個webpack入口點（例如polyfills.ts）進口：

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

來源

2016-05-02 14:04:58

在Angular2 App中集成Webpack

回答

相關問題