web-dev-qa-db-fra.com

Comment charger RxJS dans une application minimale Angular 2 en utilisant systemjs?

Je ne parviens pas à obtenir une application minimale Angular 2 utilisant RxJS sur le sol. J'utilise TypeScript (tsc 1.6.2) et systemjs pour le chargement des modules. Comment puis-je obtenir systemjs à charger le module Rx correctement? J'ai manqué d'idées pour essayer et j'apprécierais tout pointeur sur ce que je fais mal. Le chargement du module est un peu magique pour moi. Très frustrant.

index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <script src="../node_modules/es6-shim/es6-shim.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/rx/dist/rx.lite.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
</head>

<body>
    <app>App loading...</app>
    <script>
        System.config({
            packages: { 'app': { defaultExtension: 'js' } }
        });
        System.import('app/app');
    </script>
</body>
</html>

app.ts :

/// <reference path="../../node_modules/rx/ts/rx.all.d.ts" />
import { bootstrap, Component, View } from 'angular2/angular2';
import * as Rx from 'rx';

@Component({
    selector: 'app'
})
@View({
        template: `Rx Test`
})
export class App {
    subject: Rx.Subject<any> = new Rx.Subject<any>();
}
bootstrap(App);

SystemJS tente de charger un fichier qui n'existe pas:

enter image description here

Dès que je commente le sujet dans le code ci-dessus, tout se passe bien car il n'y aura pas de tentative de chargement du fichier inexistant (et aucun rx n'est chargé).

javascriptangulartypescriptrxjs
11
Toby

Mettre à jour angular2 beta 0

Angular2 ne regroupe plus RxJS dans Angular2 lui-même. Vous devez maintenant importer les opérateurs individuellement. Ce fut un changement de rupture important auquel j'ai répondu ici . Veuillez donc vous référer à cette réponse car celle-ci est obsolète et ne s'applique plus.

Mise à jour 12/11/2015

Alpha46 utilise RxJS alpha 0.0.7 (bientôt 0.0.8). Depuis cette version alpha ng2 vous n'avez plus besoin de la solution ci-dessous, vous pouvez désormais importer Observable, Subject entre autres directement depuis angular2/angular, afin que la réponse d'origine puisse être ignorée

import {Observable, Subject} from 'angular2/angular2';

=====================================

Angular2 n'utilise plus l'ancien RxJS , ils sont passés au nouveau RxJS 5 (alias RxJS Next) donc il entrera en collision avec Http et EventEmitter.

Supprimez donc d'abord l'importation et le script dans rx.lite.js.

Au lieu de cela, vous devez le faire (vous n'avez pas besoin de scripts ni de mappage dans votre configuration)

Modifier

Cette ligne est de le faire fonctionner dans un plnkr, mais dans mes projets je dois juste ajouter autre chose

Version Plnkr

import Subject from '@reactivex/rxjs/dist/cjs/Subject';

Version hors ligne

import * as Subject from '@reactivex/rxjs/dist/cjs/Subject';

Remarque sur la version hors ligne

Si vous essayez la première approche pour plnkr dans vos projets locaux, vous obtiendrez probablement ce message d'erreur

TypeError: Subject_1.default is not a function

Donc, pour votre version locale (hors ligne), vous devez utiliser la deuxième approche (avec l'astérisque).

Remarque

Il n'y a pas de parenthèse dans Subject et cela est expliqué dans cette conversation (j'ai eu le même problème, lol)

Voici un plnkr n'échoue pas .

J'espère que ça aide. Si j'ai raté quelque chose, dites-le moi;)

9
Eric Martinez

Pour angular2 alpha52 utilise rxjs 5alpha.14

<script>
System.config({
  map: { rxjs: 'node_modules/rxjs' },
  packages: {
    rxjs: { defaultExtension: 'js' },
    'app': {defaultExtension: 'js'}
  }
});
System.import('app/app');
</script>

mais vous devez importer chaque opérateur individuellement comme cet exemple

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

require('rxjs/add/operator/map');
require('rxjs/add/operator/scan');
require('rxjs/add/operator/mergemap');  //for flatmap
require('rxjs/add/operator/share');
require('rxjs/add/operator/combinelatest-static'); //for combinelatest
8
Murhaf Sousli

Publier cette réponse après Angular 4 release. Essayez de charger le strict minimum depuis Rxjs, car Angular prod build même avec AOT va 300kb)

J'espère que cela aide.

import { Injectable } from '@angular/core';
import {Http} from "@angular/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';// load this in main.ts

import {AllUserData} from "../../../shared/to/all-user-data";

@Injectable()
export class ThreadsService {

  constructor(private _http: Http) { }

  loadAllUserData(): Observable<AllUserData> {
    return this._http.get('/api/threads')
      .map(res => res.json());
  }

}
2
STEEL