Как загрузить RxJS в минимальное приложение Angular 2, используя systemjs?

Я не могу получить минимальное приложение Angular 2, используя RxJS с земли. Я использую Typescript (tsc 1.6.2) и systemjs для загрузки модуля. Как получить правильную загрузку модуля Rj? У меня не хватало идей, чтобы попробовать, и я был бы признателен за любой указатель на то, что я делаю неправильно. Загрузка модуля для меня немного волшебна. Очень расстраивает.

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 пытается загрузить файл, который не существует:

Как только я прокомментирую тему в приведенном выше коде, все работает нормально, так как не будет попытки загрузить несуществующий файл (и никакой rx не загружен).

Ответы

Ответ 1

Обновление angular2 beta 0

Angular2 больше не связывает RxJS внутри самого angular2. Теперь вы должны импортировать операторы отдельно. Это было важное изменение, которое я ответил здесь. Поэтому, пожалуйста, обратитесь к этому ответу, поскольку он устарел и больше не применяется.

Обновление 12/11/2015

Alpha46 использует RxJS альфа 0.0.7 (скоро будет 0.0.8). Начиная с этой версии ng2 alpha вам больше не нужно решение ниже, теперь вы можете импортировать Observable, Subject среди других непосредственно из angular2/angular, поэтому исходный ответ можно отбросить

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

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

Angular2 больше не использует старый RxJS, они переместились в новый RxJS 5 (иначе RxJS Next), поэтому он столкнется с Http и EventEmitter.

Итак, сначала удалите импорт и script в rx.lite.js.

Вместо этого вам нужно сделать (вам не нужны никакие сценарии или сопоставление в вашей конфигурации)

Edit

Эта строка предназначена для работы в plnkr, но в моих проектах мне просто нужно добавить что-то еще

Версия Plnkr

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

Автономная версия

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

Примечание о автономной версии

Если вы попробуете первый подход для plnkr в своих локальных проектах, вы, вероятно, получите сообщение об ошибке

TypeError: Subject_1.default is not a function

Итак, для вашей локальной (автономной) версии вы должны использовать второй подход (со звездочкой).

Примечание

В Subject нет скобки и это объясняется в этот разговор (у меня была та же проблема, lol)

Здесь plnkr не работает.

Надеюсь, это поможет. Если я пропустил что-то, просто скажи мне;)

Ответ 2

Для angular2 alpha52 использует rxjs 5alpha.14

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

но вы должны импортировать каждый оператор отдельно, как в этом примере

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

Ответ 3

Публикация этого ответа после выпуска Angular 4. Попробуйте загрузить минимальный минимум из Rxjs, так как Angular prod build даже с AOT собирается 300kb

Надеюсь, что это поможет.

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());
  }

}