web-dev-qa-db-ja.com

ES6をAngular2 rc3で使用する場合、キャッチされていないリフレクトメタデータシムが必要です

Angularを_rc-1_から最新の_rc-3_に更新しました。アプリはJavaScript ES6とSystemJSを使用しています。browsersyncでアプリを実行すると、それは動作しますが、アプリを（systemjs-builderに）バンドルして実行すると、ブラウザコンソールにこのエラーが表示されます

クラスデコレータを使用する場合は、未捕捉のリフレクトメタデータシムが必要です。

問題は、基本的なhttp呼び出しで_@angular/http_を使用しているコンポーネントに起因します。_import {Http, HTTP_PROVIDERS} from '@angular/http' ;_を削除すると動作します。

さらに、TypeScriptでは発生しませんが、JS ES5およびES6では発生します。また、Webpackでは発生しません。

バンドルされたコードを調べましたが、SystemJSはAngularコードの前にReflectコードを通過するようです... 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]];  
  }
}
_
javascriptangularecmascript-6systemjs
16
rocketer

reflect-metadata、es6-shimおよびzone.jsはグローバルライブラリであると想定されています。したがって、index.jsの場合のように、モジュールの1つにインポートしないでください。

Angular 2クイックスタート で説明されているように、index.jsのimportステートメントを削除して、index.htmlで参照してください。

<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>
19
Mark Langer