Webpack integration in Angular2 App

Question

I am trying to use Webpack in my Angular2 app. However, I keep getting this error:

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

Below is the folder structure.

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

And below is the webpack.config.js file

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

I am new to Webpack and Angular2. Can anyone please tell me what configuration have I got wrong?

Progress

When I add following tags in the index.html, everything run fine.

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

Andreas Jägle · Accepted Answer · 2016-05-02 14:04:58Z

Angular requires some features that are not yet implemented in the browsers and therefore need to be polyfilled (which means adding an implementation for a not yet existing feature). So angular will only run if this code is available, which happens when you just add the scripts.

You can avoid adding the scripts manually by just importing the required shim and polyfill library in one of your bootstrap ts files (e.g. main.ts) or by simply defining a second webpack entrypoint (e.g. polyfills.ts) with these two imports:

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

Collectives™ on Stack Overflow

Webpack integration in Angular2 App

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related