Question

我正在尝试在Webpack应用中使用Angular2。但是，我一直收到这个错误：

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>

Answer 1

Angular需要一些尚未在浏览器中实现的功能，因此需要进行polyfilled（这意味着为尚未存在的功能添加实现）。因此，只有在此代码可用时才会运行angular，这只会在您添加脚本时发生。

您可以通过在一个bootstrap ts文件（例如main.ts）中导入所需的填充程序和polyfill库，或者通过简单地使用这两个导入定义第二个webpack入口点（例如polyfills.ts）来避免手动添加脚本：

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

Angular2 App中的Webpack集成

1 个答案: