Non riesco a ottenere una minima applicazione Angular 2 utilizzando RxJS da terra. Sto usando Typescript (tsc 1.6.2) e systemjs per il caricamento del modulo. Come posso ottenere systemjs per caricare correttamente il modulo Rx? Ho esaurito le idee per provare e apprezzerei qualsiasi puntatore a ciò che sto facendo male. Il caricamento del modulo è un po 'magico per me. Molto frustrante.Come caricare RxJS in un'app Angular 2 minima usando 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 tenta di caricare un file che non esiste:

Non appena commento l'argomento nel codice sopra riportato, tutto funziona correttamente poiché non ci sarà alcun tentativo di caricare il file inesistente (e nessun rx verrà caricato).

fonte

2015-10-27 Toby

aggiornamento beta angular2 0

Angular2 non è più bundling RxJS all'interno Angular2 sé. Ora devi importare gli operatori individualmente. Questo è stato un importante cambio di rottura che I answered here. Quindi, per favore, fai riferimento a quella risposta poiché questa è obsoleta e non si applica più.

Aggiornamento 12/11/2015

Alpha46 sta usando RxJS alpha 0.0.7 (che presto saranno 0.0.8). Dal momento che questa versione alpha NG2 non avete bisogno di più la soluzione qui di seguito, è possibile ora importare Observable, Subject tra gli altri direttamente da angular2/angular, quindi la risposta originale può essere scartato

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

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

Angular2 non utilizza più il vecchio RxJS, è stato spostato nel nuovo RxJS 5 (ovvero RxJS Successivo) quindi entrerà in collisione con Http ed EventEmitter.

Quindi rimuovere prima l'importazione e lo script in rx.lite.js.

Invece si hanno a che fare (è necessario nessuno script né mappatura nella configurazione)

Modifica

Questa linea è quello di farlo funzionare in un plnkr, ma nei miei progetti non mi resta che aggiungere qualcos'altro

versione Plnkr

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

Offline versione

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

Note sulla versione offline

Se si tenta il primo approccio per plnkr nei vostri progetti locali probabilmente otterrete questo messaggio di errore

TypeError: Subject_1.default is not a function

Quindi per la tua versione locale (offline) dovresti usare il secondo approccio (con l'asterisco).

Nota

Non c'è staffa Subject e questo è spiegato in this conversation (ho avuto lo stesso problema, lol)

Ecco un plnkr not failing.

Spero che aiuti. Se ho perso qualcosa dimmi solo;)

fonte

2015-10-28 03:38:38

Eric, grazie per aver dedicato tempo a rispondere! Questo ha risolto parte del mistero per me. Scusate per aver impiegato così tanto tempo a tornare da voi, ho passato la maggior parte di oggi a cercare di ottenere lo stesso progetto lavorando off-line (senza alcun vero successo, devo dire). Sto usando VSC e Typescript 1.6.2, lo stesso transpiler usato nel tuo esempio. Il codice generato da ** app.ts ** nella versione "online" ha un'intestazione leggermente diversa che sembra fare la differenza (chiama 'System.register (...)'). Hai avuto successo nella compilazione e nell'esecuzione in locale con VSC/tsc? – Toby

Hai ricevuto qualche errore? Infatti, nella mia versione offline (il mio progetto) ho importato * come Subject da '...' '(un po 'diverso dalla mia risposta. Hai qualcos'altro? Quanto è diverso il tuo online rispetto alla tua versione offline ? –

Quindi stai ricevendo errori in fase di esecuzione? Oppure fallisce silenziosamente? Stai usando qualche strumento come JSPM, Webpack o qualcosa del genere? Puoi creare un repository così posso clonarlo e vederlo? –

Per angular2 alpha52 usi rxjs 5alpha.14

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

ma bisogna importare ogni operatore singolarmente come in questo esempio

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

fonte

2015-12-12 19:35:58

Distacco questa risposta dopo Versione angolare 4. Prova a caricare il minimo da Rxjs, dal momento che Angular prod build anche con AOT sta andando a 300kb

Spero che aiuti.

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

}

fonte

2017-03-22 10:40:10 STEEL

Come caricare RxJS in un'app Angular 2 minima usando systemjs?

risposta

aggiornamento beta angular2 0

Problemi correlati