Nie mogę uzyskać minimalnej aplikacji Angular 2 przy użyciu RxJS z ziemi. Używam Typescript (tsc 1.6.2) i systemjs do ładowania modułów. W jaki sposób uzyskać systems, aby poprawnie załadował moduł Rx? Nie mam pomysłów, by spróbować, i doceniam każdy wskaźnik tego, co robię źle. Ładowanie modułu jest dla mnie trochę magiczne. Bardzo frustrujące.Jak załadować RxJS w minimalnej aplikacji Angular 2 przy użyciu systemjs?

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 próbuje załadować plik, który nie istnieje:

Jak tylko skomentuję w powyższym kodzie temat, wszystko działa poprawnie, ponieważ nie będzie próby załadowania nieistniejącego pliku (i nie załadowano żadnego pliku rx).

Źródło

2015-10-27 Toby

Aktualizacja angular2 beta 0

Angular2 nie jest już łączenie RxJS w samym Angular2. Teraz musisz importować operatorów indywidualnie. To była ważna przełomowa zmiana, którą I answered here. Więc proszę odnieść się do tej odpowiedzi, ponieważ ta jest przestarzała i już nie obowiązuje.

Aktualizacja 12/11/2015

Alpha46 stosuje RxJS alfa 0.0.7 (wkrótce 0.0.8). Od tej wersji alfa NG2 ty nie potrzebują więcej rozwiązanie poniżej, można teraz importować Observable, Subject między innymi bezpośrednio z angular2/angular, więc oryginalna odpowiedź można wyrzucić

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

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

Angular2 nie korzysta już ze starego RxJS, przenieśli się do nowego RxJS 5 (inaczej RxJS Next), więc koliduje z Http i EventEmitter.

Najpierw usuń import i skrypt do pliku rx.lite.js.

Zamiast tego trzeba zrobić (trzeba żadnych skryptów ani mapowania w Twojej config)

Edit

Linia ta jest, aby pracować w plnkr, ale w moich projektów po prostu trzeba dodać coś innego

wersji Plnkr

import Subject from '@reactivex/rxjs/dist/cjs/Subject';

Offline wersja

import * as Subject from '@reactivex/rxjs/dist/cjs/Subject';

Uwagi o wersji offline,

Jeśli spróbujesz pierwsze podejście do plnkr w lokalnych projektach będziesz prawdopodobnie uzyskać ten błąd wiadomość

TypeError: Subject_1.default is not a function

Tak więc dla twojej lokalnej (offline) wersji powinieneś użyć drugiego podejścia (z gwiazdką).

Uwaga

Nie ma wspornik w Subject i to wyjaśnione w this conversation (miałem ten sam problem, lol)

Oto plnkr not failing.

Mam nadzieję, że to pomaga. Jeśli coś mi umknęło mi powiedzieć;)

Źródło

2015-10-28 03:38:38

Eric, dziękuję za poświęcenie czasu na odpowiedź! To rozwiązało dla mnie część tajemnicy. Przepraszam, że tak długo wracam do ciebie. Spędziłem większość dzisiejszego dnia, próbując uruchomić ten sam projekt w trybie off-line (bez żadnego prawdziwego sukcesu, który muszę powiedzieć). Używam VSC i Typescript 1.6.2, tego samego transpilera, który jest używany w twoim przykładzie. Kod wygenerowany z ** app.ts ** w wersji "online" ma nieco inny nagłówek, który wydaje się mieć znaczenie (wywołuje "System.register (...)"). Czy udało Ci się skompilować i uruchomić to lokalnie za pomocą VSC/tsc? – Toby

Czy otrzymujesz błąd? W rzeczywistości, w mojej wersji offline (mój własny projekt) mam 'import * jako Temat z '...'' (trochę inaczej niż moja odpowiedź, czy masz coś innego? Jaka jest różnica między twoją wersją online a wersją offline ? –

A więc otrzymujesz błędy w czasie wykonywania? Lub nie działa po cichu? Czy używasz jakiegoś narzędzia, takiego jak JSPM, Webpack, czy coś w tym stylu? Czy możesz utworzyć repozytorium, aby móc je sklonować i zobaczyć? –

Dla angular2 alpha52 wykorzystuje rxjs 5alpha.14

<script> 
System.config({ 
    map: { rxjs: 'node_modules/rxjs' }, 
    packages: { 
    rxjs: { defaultExtension: 'js' }, 
    'app': {defaultExtension: 'js'} 
    } 
}); 
System.import('app/app'); 
</script>

ale trzeba importować każdy operator indywidualnie jak w poniższym przykładzie

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

Źródło

2015-12-12 19:35:58

po zamieszczaniu tę odpowiedź Wydanie Angular 4. Staraj się załadować minimum z Rxjs, ponieważ Angular prod build nawet z AOT idzie 300kb

Mam nadzieję, że to pomoże.

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

}

Źródło

2017-03-22 10:40:10 STEEL

Jak załadować RxJS w minimalnej aplikacji Angular 2 przy użyciu systemjs?

Odpowiedz

Aktualizacja angular2 beta 0

Powiązane problemy