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

26,468

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>
Share:
26,468
rocketer
Author by

rocketer

Updated on June 28, 2020

Comments

  • rocketer
    rocketer about 4 years

    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]];  
      }
    }
    
  • rocketer
    rocketer about 8 years
    However I only added reflect-metadata in the index.html because when I add zone.js I have index.js:20389EXCEPTION: RangeError: Maximum call stack size exceeded
  • Florian F
    Florian F almost 8 years
    I am running jasmine. I dont't have a index.html file.