Angular2 + Jspm.io: 使用类装饰器时需要 reflect-metadata shim

Question

我遇到了一个问题，使用以下版本的JSPM、Angular2和SystemJS（版本：Angular@2.0.0-alpha.27，JSPM@0.16.0-beta.2和SystemJS@0.18.0），在编译TypeScript时没有出现错误，但在浏览器中却出现了下面的错误信息：

/jspm_packages/npm/angular2@2.0.0-alpha.27/src/util/decorators.js:70 Uncaught reflect-metadata shim is required when using class decorators

现在当我手动包含文件Reflect.js：\jspm_packages\npm\reflect-metadata@0.1.0\Reflect.js时，这个问题就消失了，但接下来的问题是在另一个Angular文件中未定义列表。请参见下面的Bitbucket src以获取来自system.js和typescript / jspm.io的配置文件（源代码）。

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

我想知道是否可以使用jspm和system.js一起检索所有需要的angular包，以使angular正常运行。鉴于system.js的配置清楚地说明了angular依赖它：

"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"
},

但它们未被检索（查看网络选项卡）。

- N.Schipper

Answer 1

是的，你所寻找的是可能的，并且可以很好地工作。看起来你已经有了正确的依赖项。我认为你只缺少以下内容，需要放在你的顶级 TypeScript 或 JavaScript 文件的开头。具体来说，这些需要在加载 Angular 的第一行之前。

import 'zone.js';
import 'reflect-metadata';

（其他答案指向了一篇详细的、但是在外部网站上的解释。）

- Kyle Cordes

---

请不要忘记添加 jspm install reflect-metadata zone.js。 - Evan Plaice

使用这种方法可以解决问题，但如果使用bundle-sfx打包源代码，会出现“maximum call stack size exceeded”的错误。我认为，由于angular2还包含reflect-metadata和zone.js等依赖项，可能在某个地方引起了循环依赖。 - Evan Plaice

@EvanPlaice 自从 alpha 46 / 45 版本，他们将 zone.js 和 angularjs 捆绑在一起。我认为你仍然需要 es6-shim 和反射元数据。 - N.Schipper

import 'core-js/es7/reflect'; 这样做也可以。 - Alex Klaus

我应该把 import 'reflect-metadata'; 放在哪里？是在 @ishandutta2007 还是 import 'core-js/es7/reflect'; @Alex Klaus？ - DS_web_developer

Answer 2

Robwormald撰写了一篇详细解释，涵盖了人们在尝试使用jspm和typescript使angular alpha 27工作时可能遇到的问题。https://gist.github.com/robwormald/429e01c6d802767441ec

- N.Schipper

---

更新于2016年5月15日，对于Angular2-rc1，在安装了reflect-metadata后来修复这个问题，现在我从Router获取错误信息。 - shershen

Answer 3

如果在Angular 4.4+环境下遇到此问题，重新启动ng serve可以帮助解决。

- creep3007