53

I am having the following problem running the below versions of JSPM with Angular2 and SystemJS (Versions: Angular@2.0.0-alpha.27 with JSPM@0.16.0-beta.2 and SystemJS@0.18.0) That once the typescript is compiled (without errors) i get the following error in the browser:

/jspm_packages/npm/angular2@2.0.0-alpha.27/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\reflect-metadata@0.1.0\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:angular2@2.0.0-alpha.27": {
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "path": "github:jspm/nodelibs-path@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.1",
  "reflect-metadata": "npm:reflect-metadata@0.1.0",
  "rx": "npm:rx@2.5.1",
  "url": "github:jspm/nodelibs-url@0.1.0",
  "zone.js": "npm:zone.js@0.5.1"
},

But they are not retrieved (looking at the network tab)

Daniel W Strimpel
  • 8,190
  • 2
  • 28
  • 38
N.Schipper
  • 1,668
  • 3
  • 18
  • 25

3 Answers3

67

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

Kyle Cordes
  • 910
  • 1
  • 8
  • 6
  • 3
    Don't forget to add `jspm install reflect-metadata zone.js`. – Evan Plaice Oct 27 '15 at 13:22
  • 3
    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. – Evan Plaice Oct 27 '15 at 13:25
  • @EvanPlaice Since i think alpha 46 / 45 they bundle the zone.js with angularjs. I think you still need es6-shim and reflect metadata. – N.Schipper Nov 22 '15 at 11:11
  • 1
    `import 'core-js/es7/reflect';` will do the job as well – Alex Klaus Nov 23 '16 at 05:39
  • 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. – ishandutta2007 Jun 25 '17 at 10:26
  • where exactly do I put import 'reflect-metadata';?@ishandutta2007 or import 'core-js/es7/reflect'; @Alex Klaus? – DS_web_developer Aug 08 '17 at 09:43
  • @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](https://github.com/AngularClass/angular-starter/blob/master/src/polyfills.browser.ts) in `AngularClass/angular-starter`. In case you're interested in the difference between the two options, it's been described [here](https://stackoverflow.com/a/39608679/968003). – Alex Klaus Aug 08 '17 at 10:25
  • @AlexKlaus: but wasn't the whole point that server does not need polyfills? – DS_web_developer Aug 08 '17 at 10:36
  • @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. – Alex Klaus Aug 09 '17 at 02:11
13

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

N.Schipper
  • 1,668
  • 3
  • 18
  • 25
  • UPD 15-05-2016, for Angular2-rc1 after installing **reflect-metadata** to fix this problem now I get errors from Router – shershen May 15 '16 at 08:33
4

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

creep3007
  • 1,794
  • 2
  • 21
  • 22