Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators
I am having the following problem running the below versions of JSPM with Angular2 and SystemJS (Versions: [email protected] with [email protected] and [email protected]) That once the typescript is compiled (without errors) i get the following error in the browser:
/jspm_packages/npm/[email protected]/src/util/decorators.js:70 Uncaught reflect-metadata shim is required when using class decorators
Now when i manually include the file Reflect.js: \jspm_packages\npm\[email protected]\Reflect.js that problem goes away but the next problem emerges saying list is undefined within another angular file.
See the bitbucket src below for the config files (src code) from both system.js and typescript / jspm.io
What i am wondering is if it's currently even possible to use jspm together with system.js to retrieve all the angular packages that are needed for angular to function normally. Seeing as the config for system.js does state clearly that angular depends on it:
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"reflect-metadata": "npm:[email protected]",
"rx": "npm:[email protected]",
"url": "github:jspm/[email protected]",
"zone.js": "npm:[email protected]"
},
But they are not retrieved (looking at the network tab)
Answer
Yes, what you're looking for is possible and works nicely. It appears as though you have the dependencies right. I think you are missing only the following, which needs to be at the beginning of your top level typescript or JavaScript file. Specifically, these need to be prior to the first line is that loads Angular.
import 'zone.js';
import 'reflect-metadata';
(The other answer points to a detailed, but off-site explanation.)