SystemJS wczytuje wiele plików do rxjs

Question

Mam następujący systemjs.config.js (oparte na jakimś przykładzie znalazłem w internecie):

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

Kiedy zacznę mój wniosek Angular2 pliki wiele indywidualnych rxjs są ładowane który trwa bardzo długo . Mam dołączoną wersją RxJs w js/rxjs/bundles/Rx.js, więc starałem się modyfikować systemjs.config.js takiego:

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

Kiedy próbuję uruchomić mój wniosek teraz, otrzymuję następujący błąd w przeglądarce:

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 

Moja main.ts wygląda następująco:

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

A moja app.module.ts wygląda następująco:

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

Co muszę zmienić, aby moja aplikacja działała z dołączonym plikiem Rx.js?

Answer 1

jeśli konfiguracja oparta jest na quickstart angular2, to robisz OK.

Jednak w żadnym wypadku nie

import {something} from 'rxjs/Rx'; 

to jest źle i będzie importować całą bibliotekę RxJS (jeśli chcesz używać tylko Obserwowalne).

import {Observable} from 'rxjs/Rx'; 

jest to poprawne

import {Observable} from 'rxjs/Observable'; 

i zmniejszy liczbę importu. Upewnij się, że aplikacja nie ma żadnych odniesień do "rxjs/Rx"

PS Nie chcesz pobrać całej biblioteki RxJS w jednym pliku, ponieważ byłby bardzo duży. To jest jedyny powód, dla którego tylko importujesz potrzebne moduły RxJS.

Answer 2

Jakiś czas temu zrobiłem to demo, które używa Angular2 i ładuje RxJS jako pojedynczy pakiet.

Zasadniczo, wszystko zrobiłem było:

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

gdzie jedyną ważną rzeczą jest rxjs* który pasuje na przykład rxjs/Subject lub rxjs/add/operator/concat i tak dalej.

Zobacz na żywo demo na plnkr: http://plnkr.co/edit/rnO74mQNuPsHAmrIVJ8j?p=preview