web-dev-qa-db-fra.com

Un shim de métadonnées de réflexion non capturé est requis lors de l'utilisation d'ES6 avec Angular2 rc3

Je viens de mettre à jour Angular from rc-1 au dernier rc-3. L'application utilise JavaScript ES6 et SystemJS. Lorsque je lance l'application avec Browsersync, cela fonctionne. Mais si je regroupe l'application (avec systemjs-builder) puis l'exécute, j'ai cette erreur dans la console du navigateur

Un shim de métadonnées de réflexion non capturé est requis lors de l'utilisation de décorateurs de classe.

Le problème vient d'un composant utilisant @angular/http avec un appel http basique, si je supprime import {Http, HTTP_PROVIDERS} from '@angular/http' ; Ça marche.

De plus, cela ne se produit pas avec TypeScript, mais c'est le cas avec JS ES5 et ES6. Cela n'arrive pas non plus avec Webpack.

J'ai examiné le code fourni et il semble que SystemJS passe par le code Angular avant le code Reflect ... uniquement avec 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 et zone.js sont censés être des bibliothèques globales. Par conséquent, vous ne devez pas les importer dans l'un de vos modules comme vous le faites dans index.js.

Essayez de supprimer les instructions d'importation dans votre index.js et de les référencer dans votre index.html comme cela est expliqué dans le 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>
19
Mark Langer