SystemJS tải nhiều file cho rxjs

Question

Tôi đã sau systemjs.config.js (dựa trên một số ví dụ tôi tìm thấy trên internet):

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

Khi tôi bắt đầu ứng dụng Angular2 tôi nhiều rxjs cá nhân tập tin được nạp mà phải mất một thời gian dài . Tôi có một phiên bản đóng gói của RxJs trong js/rxjs/bundles/Rx.js, vì vậy tôi cố gắng sửa đổi systemjs.config.js như thế này:

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

Khi tôi cố gắng để bắt đầu ứng dụng của tôi bây giờ, tôi nhận được lỗi sau đây trong trình duyệt:

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 của tôi trông như thế này:

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

Và app.module.ts của tôi trông như thế này:

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 { } 

Tôi phải thay đổi gì để ứng dụng của tôi hoạt động với Rx.js đi kèm?

Answer 1

nếu thiết lập của bạn dựa trên angular2 quickstart thì bạn đang thực hiện OK.

Tuy nhiên, bạn không bao giờ

import {something} from 'rxjs/Rx'; 

điều này là sai và sẽ nhập khẩu toàn bộ thư viện RxJS (khi bạn chỉ muốn sử dụng Quan sát).

import {Observable} from 'rxjs/Rx'; 

này là đúng

import {Observable} from 'rxjs/Observable'; 

và sẽ giảm số lượng hàng nhập khẩu. Đảm bảo ứng dụng của bạn không có tham chiếu đến 'rxjs/Rx'

PS Bạn không muốn kéo toàn bộ thư viện RxJS vào một tệp vì nó sẽ rất lớn. Đó là toàn bộ lý do đằng sau chỉ nhập các mô-đun RxJS bạn cần.

Answer 2

Một thời gian trước, tôi đã tạo bản trình diễn này sử dụng Angular2 và tải RxJS thành một gói duy nhất.

Về cơ bản, tất cả những gì đã làm được:

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

mà điều quan trọng duy nhất là rxjs* phù hợp với ví dụ rxjs/Subject hoặc rxjs/add/operator/concat và vân vân.

Xem bản trình diễn trực tiếp trên plnkr: http://plnkr.co/edit/rnO74mQNuPsHAmrIVJ8j?p=preview