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)

Bilk

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

Bilk

UPD 15-05-2016, for Angular2-rc1 after installing reflect-metadata to fix this problem now I get errors from Router – Shepherd

Answer 2

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

Plumbing

Don't forget to add jspm install reflect-metadata zone.js. – Seger

While this works, if you bundle the source using bundle-sfx it works but it'll throw a maximum call stack size exceeded error. I think, since angular2 also include reflect-metadata and zone.js as dependencies it's causing a circular dependency somewhere. – Seger

@EvanPlaice Since i think alpha 46 / 45 they bundle the zone.js with angularjs. I think you still need es6-shim and reflect metadata. – Bilk

import 'core-js/es7/reflect'; will do the job as well – Raffarty

I came across this issue while trying to access static methods. for me import 'reflect-metadata'; worked but if I put import 'zone.js'; also, it goes back to same error. – Calculator

where exactly do I put import 'reflect-metadata';?@Calculator or import 'core-js/es7/reflect'; @Alex Klaus? – Celestine

@DS_web_developer, you put it in the entry point (module loaded on the start up). E.g. have a look how it's been done in AngularClass/angular-starter. In case you're interested in the difference between the two options, it's been described here. – Raffarty

@AlexKlaus: but wasn't the whole point that server does not need polyfills? – Celestine

@DS_web_developer, necessity in the polyfill is coming from the environment you're running the JS code. You may not need it in some circumstances. – Raffarty

Answer 3

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

Splayfoot