CODEWITHSUNDEEP
javascriptangularecmascript-6systemjs
rocketer
rocketer

Reputation: 1071

Uncaught reflect-metadata shim is required when using ES6 with Angular2 rc3

I just updated Angular from rc-1 to latest rc-3. The app is using JavaScript ES6 and SystemJS. When I run the app with browsersync, it works. But if I bundle the app (with systemjs-builder) and then run it, I have this error in the browser console

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

The problem comes from a component using @angular/http with a basic http call, if I remove import {Http, HTTP_PROVIDERS} from '@angular/http' ; it works.

Plus, it does not happen with TypeScript but it does with JS ES5 and ES6. Also it doesn't happen with Webpack.

I looked into the bundled code and it appears that SystemJS goes through Angular code before Reflect code... only with es6

index.js

import 'reflect-metadata';
import 'es6-shim';
import 'zone.js';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app.js';
bootstrap(App);

app.js

import {Component} from '@angular/core';
import {Http, HTTP_PROVIDERS} from '@angular/http';
@Component({
  selector: 'App',
  template: '',
  providers: [HTTP_PROVIDERS]
})
export class App {
  constructor(http) {}

  static get parameters() {
    return [[Http]];  
  }
}

Upvotes: 17

Views: 26688

Answers (1)

Mark
Mark

Reputation: 1091

reflect-metadata, es6-shim and zone.js are supposed to be global libraries. Consequently, you should not import them into one of your modules like you do in index.js.

Try removing the import statements in your index.js and reference them in your index.html like it is explained in the Angular 2 Quickstart:

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

Upvotes: 20

Related Questions