Uncaught reflect-metadata shim is required when using class decorators

3
votes

While trying to run my Angular2 app with typescript and npm I am getting the error in title. As said in similar topics I tried the "import 'reflect-metadata'; " But it didn't work.

This is the dependency in my package.json file:

"reflect-metadata": "0.1.3",

Thanks in advance for your time

P.S:This happened after I upgraded my app from rc4 to rc5

Edit 1

More details about error:

checkReflect    @   vendor.js:40700
(anonymous function)    @   vendor.js:40702
(anonymous function)    @   vendor.js:40791
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:30176
(anonymous function)    @   vendor.js:30215
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:30634
(anonymous function)    @   vendor.js:30652
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:37326
(anonymous function)    @   vendor.js:37842
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:36288
(anonymous function)    @   vendor.js:37305
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:26058
(anonymous function)    @   vendor.js:26118
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:9935
(anonymous function)    @   vendor.js:10294
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:12761
(anonymous function)    @   vendor.js:12871
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:12255
(anonymous function)    @   vendor.js:12657
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:12907
(anonymous function)    @   vendor.js:12935
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:12885
(anonymous function)    @   vendor.js:12892
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:6709
(anonymous function)    @   vendor.js:6746
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:49327
(anonymous function)    @   vendor.js:49528
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   main.js:404
initModule  @   vendor.js:43
require @   vendor.js:60
(anonymous function)    @   (index):38
2
angulartypescriptreflect-metadata
can you create a plunker to reproduce it ? – candidJ
@candidJ This is git link: github.com/Miss-Git/R-Panel – Soli
Did you solve it? I'm having the same issue and I too upgraded from rc4 to rc5 (using webpack here) – Manatax
@Manatax not yet. but i figured out the problem is with 'Reflect.getMetadata'. I'll update this post if there are any developments – Soli
I switched from webpack to systemjs until this gets solved :P – Manatax

2 Answers

3
votes

I got the same problem with angular 4.1.3 with cli build when I upgraded my swagger generated client code for rest end points (swagger editor 2.2.3).

I have added reflect-metadata and its worked for me. Any one facing the issue after angular 4 and have cli may help this.

The error message was little different as below

_fails.js:1 Uncaught SyntaxError: Unexpected identifier
    at Object../node_modules/core-js/modules/_descriptors.js (_descriptors.js:2)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
    at Object../node_modules/core-js/modules/es6.symbol.js (es6.symbol.js:5)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
    at Object../node_modules/core-js/es6/symbol.js (polyfills.bundle.js:1560)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
    at Object../src/polyfills.ts (ckset.ts:17)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
    at Object.2 (polyfills.bundle.js:13849)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
core.es5.js:354 Uncaught reflect-metadata shim is required when using class decorators
1
votes

There should be errors in console that explain why reflect-metadata wasn't loaded.

The existing problem with 0.1.3 is that it has conditional dependencies that can be erroneously included by modular systems (SystemJS, Webpack, etc). This doesn't happen if the script is loaded in normal fashion,

<script src="https://npmcdn.com/[email protected]"></script>

Later package version should be used to use reflect-metadata with modular systems, 0.1.8 is available at this moment.