SystemJS負荷爲rxjs

Question

許多文件我有以下systemjs.config.js（基於一些例子中，我在互聯網上找到）：

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'js:': 'js/', 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'js:angular2/core.umd.js', 
      '@angular/common': 'js:angular2/common.umd.js', 
      '@angular/compiler': 'js:angular2/compiler.umd.js', 
      '@angular/platform-browser': 'js:angular2/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js', 
      '@angular/http': 'js:angular2/http.umd.js', 
      '@angular/router': 'js:angular2/router.umd.js', 
      '@angular/forms': 'js:angular2/forms.umd.js', 
      '@angular/upgrade': 'js:angular2/upgrade.umd.js', 
      // other libraries 
      'rxjs': 'js:rxjs', 
      'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

當我開始我的Angular2應用中有許多個人rxjs文件被加載，這需要很長一段時間。我在js/rxjs/bundles/Rx.js有RxJs的捆綁版本，所以我試圖修改systemjs.config.js這樣的：

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'js:': 'js/', 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'js:angular2/core.umd.js', 
      '@angular/common': 'js:angular2/common.umd.js', 
      '@angular/compiler': 'js:angular2/compiler.umd.js', 
      '@angular/platform-browser': 'js:angular2/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js', 
      '@angular/http': 'js:angular2/http.umd.js', 
      '@angular/router': 'js:angular2/router.umd.js', 
      '@angular/forms': 'js:angular2/forms.umd.js', 
      '@angular/upgrade': 'js:angular2/upgrade.umd.js', 
      // other libraries 
      'rxjs': 'js:rxjs/bundles/Rx.js', 
      'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

當我嘗試從現在開始我的申請，我得到在瀏覽器中出現以下錯誤：

Error: (SystemJS) Syntax error 
    SyntaxError: Syntax error 
     at Anonymous function (eval code:2:1) 
    Evaluating http://localhost:37191/js/rxjs/bundles/Rx.js/Subject 
    Evaluating http://localhost:37191/app/main.js 
    Error loading http://localhost:37191/app/main.js 

我main.ts看起來是這樣的：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule); 

而且我app.module.ts看起來是這樣的：

import 'rxjs'; 

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppRoutingModule } from './app-routing.module'; 

import { AppComponent } from './app.component'; 
import { DeviceGroupsViewComponent } from './device-groups-view.component'; 

import { DeviceGroupService } from './devicegroup.service'; 
import { SourceTypeService } from './sourcetype.service'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     AppRoutingModule 
    ], 
    declarations: [ 
     AppComponent, 
     DeviceGroupsViewComponent 
    ], 
    providers: [ 
     DeviceGroupService, 
     SourceTypeService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

爲了讓我的應用能夠與捆綁的Rx.js一起工作，我需要做些什麼改變？

Answer 1

如果您的設置是基於angular2 quickstart，那麼你做得很好。

但是，你千萬不要

import {something} from 'rxjs/Rx'; 

這是錯誤的，並且將導入整個RxJS庫（當你只想使用可觀察）。

import {Observable} from 'rxjs/Rx'; 

這是正確的

import {Observable} from 'rxjs/Observable'; 

，並會減少進口數量。確保您的應用沒有提及'rxjs/Rx'

PS您不想將整個RxJS庫拉入單個文件中，因爲它非常大。這就是導入您需要的RxJS模塊的全部原因。

Answer 2

前段時間我做了這個使用Angular2並加載RxJS作爲一個包的演示。

基本上，我所做的就是：

paths: { 
    'rxjs*': 'https://unpkg.com/@reactivex/rxjs@5.0.0-beta.12/dist/global/Rx.js' 
}, 

其中唯一重要的事情是rxjs*是例如rxjs/Subject或rxjs/add/operator/concat等相匹配。

在plnkr上查看現場演示：http://plnkr.co/edit/rnO74mQNuPsHAmrIVJ8j?p=preview