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