Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators

Question

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

https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5e3e9eede7db495545234f3b0c04a

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 1

Robwormald wrote a nicely detailed explanation that covers the issues people might have at this point and time trying to get angular alpha 27 to work with jspm and typescript https://gist.github.com/robwormald/429e01c6d802767441ec

Answer 2

If this problem occurs in an Angular 4.4+ environment, it can help if you restart ng serve.

Answer 3

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.)