我無法獲得使用RxJS的最小的Angular 2應用程序。我正在使用Typescript（tsc 1.6.2）和systemjs進行模塊加載。我如何讓systemjs正確加載Rx模塊？我已經用盡了想法嘗試，我會很感激任何指向我做錯的事情。模塊加載對我來說有點神奇。非常令人沮喪。如何使用systemjs在最小的Angular 2應用程序中加載RxJS？

的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）。

來源

2015-10-27 Toby

更新angular2公測0

Angular2不再在Angular2本身捆綁RxJS。現在您必須單獨導入運營商。這是一個重要的突破變化，我answered here。所以請參考這個答案，因爲這個答案已經過時，不再適用。

更新2015年12月11日

Alpha46使用RxJS阿爾法0.0.7（即將0.0.8）。既然你不需要更多下面的解決方案這個NG2 alpha版本，現在可以直接從angular2/angular進口Observable，Subject等等，所以原來的答案可以丟棄

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

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

Angular2不再使用舊的RxJS，他們搬到新的RxJS 5（又名RxJS Next ），所以它會與Http和EventEmitter發生衝突。

因此，首先刪除導入和腳本到rx.lite.js.

相反，你需要做的（你需要在你的配置沒有劇本，也沒有映射）

編輯

此行是爲了使其在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沒有支架，並且在this conversation解釋（我有同樣的問題，大聲笑）

這裏有一個plnkr not failing。

我希望它有幫助。如果我錯過了什麼就告訴我;）

來源

2015-10-28 03:38:38

埃裏克，感謝您抽出時間回覆！這解決了我的一部分神祕。對不起，花了這麼長時間回到你身邊，我花了大部分時間試圖讓同一個項目脫機工作（沒有任何真正的成功，我必須說）。我使用的VSC和打字稿1.6.2，就是在你的例子中使用的相同transpiler。在「在線」版從** ** app.ts生成的代碼有一個稍微不同的頭，這似乎使所有的差異（它調用'System.register（...）'）。你有過任何成功編譯並與VSC/TSC本地運行呢？ – Toby

您是否收到任何錯誤？事實上，在我的離線版本（我自己的項目）中，我有'import *'作爲'...'的主題（與我的答案有點不同）。還有其他的東西嗎？你的在線和離線版本有什麼不同？？ –

所以你在運行時遇到了錯誤呢？或者它在默默地失敗了嗎？你是否使用了一些工具，比如JSPM，Webpack或者其他東西？你能創建一個repo，以便我可以克隆它並查看它嗎？ –

對於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

來源

2015-12-12 19:35:58

發佈這樣的回答後Angular 4發佈。嘗試從Rxjs加載最低限度，因爲即使AOT的Angular prod build也要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()); 
    } 

}

來源

2017-03-22 10:40:10 STEEL

如何使用systemjs在最小的Angular 2應用程序中加載RxJS？

回答

更新angular2公測0

相關問題