将 ES6 与 Angular2 rc3 一起使用时，需要未捕获的反射元数据 shim

Posted 2023-02-22

【中文标题】将 ES6 与 Angular2 rc3 一起使用时，需要未捕获的反射元数据 shim

【英文标题】：Uncaught reflect-metadata shim is required when using ES6 with Angular2 rc3

【发布时间】：2016-10-29 11:24:27

【问题描述】：

我刚刚将 Angular 从 rc-1 更新到最新的 rc-3。 该应用程序使用 javascript ES6 和 SystemJS。当我使用 browsersync 运行应用程序时，它可以工作。但是如果我捆绑应用程序（使用 systemjs-builder）然后运行它，我会在浏览器控制台中出现此错误

使用类装饰器时需要未捕获的反射元数据填充程序。

问题来自使用@angular/http 和基本http 调用的组件，如果我删除import Http, HTTP_PROVIDERS from '@angular/http' ; 它可以工作。

另外，TypeScript 不会发生这种情况，但 JS ES5 和 ES6 会发生这种情况。 Webpack 也不会发生这种情况。

我查看了捆绑的代码，似乎 SystemJS 在 Reflect 代码之前通过 Angular 代码...仅使用 es6

index.js

import 'reflect-metadata';
import 'es6-shim';
import 'zone.js';
import bootstrap from '@angular/platform-browser-dynamic';
import App from './app.js';
bootstrap(App);

app.js

import Component from '@angular/core';
import Http, HTTP_PROVIDERS from '@angular/http';
@Component(
  selector: 'App',
  template: '',
  providers: [HTTP_PROVIDERS]
)
export class App 
  constructor(http) 

  static get parameters() 
    return [[Http]];  
  

【问题讨论】：

你使用任何转译器来使用装饰器吗？

是的，我使用github.com/systemjs/plugin-babel

【参考方案1】：

reflect-metadata、es6-shim 和 zone.js 应该是全局库。因此，您不应像在 index.js 中那样将它们导入您的模块之一。

尝试删除 index.js 中的 import 语句并在 index.html 中引用它们，就像 Angular 2 Quickstart 中解释的那样：

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

【讨论】：

但是我只在 index.html 中添加了reflect-metadata，因为当我添加zone.js 时我有index.js:20389EXCEPTION: RangeError: Maximum call stack size exceeded

我正在运行 jasmine。我没有 index.html 文件。