Uncaught reflect-metadata shim is required when using ES6 with Angular2 rc3
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>
rocketer
Updated on June 28, 2020Comments
-
rocketer about 4 years
I just updated Angular from
rc-1
to latestrc-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 consoleUncaught 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 removeimport {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 beforeReflect
code... only with es6index.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 about 8 yearsHowever I only added
reflect-metadata
in the index.html because when I addzone.js
I haveindex.js:20389EXCEPTION: RangeError: Maximum call stack size exceeded
-
Florian F almost 8 yearsI am running jasmine. I dont't have a index.html file.