Observable.of non è una funzione

Sto riscontrando problemi con la Observable.offunzione di importazione nel mio progetto. Il mio Intellij vede tutto. Nel mio codice ho:

import {Observable} from 'rxjs/Observable';

e nel mio codice lo uso così:

return Observable.of(res);

Qualche idea?

In realtà ho incasinato le importazioni. Nell'ultima versione di RxJS possiamo importarlo in questo modo:

import 'rxjs/add/observable/of';

Se qualcuno ha questo problema durante l'utilizzo di Angular 6 / rxjs 6, vedi le risposte qui: Impossibile utilizzare Observable.of in RxJs 6 e Angular 6

In breve, è necessario importarlo in questo modo:

import { of } from 'rxjs';

E poi invece di chiamare

Observable.of(res);

basta usare

of(res);

Anche se suona assolutamente strano, con me importava capitalizzare la "O" nel percorso di importazione di import {Observable} from 'rxjs/Observable. Il messaggio di errore con observable_1.Observable.of is not a functionrimane presente se importare l'Osservabile da rxjs/observable. Strano ma spero che aiuti gli altri.

Se si utilizza Angular 6/7

import { of } from 'rxjs';

E poi invece di chiamare

Observable.of(res);

basta usare

of(res);

Il mio sciocco errore è stato che ho dimenticato di aggiungere /addquando ho richiesto l'osservabile.

Era:

import { Observable } from 'rxjs/Observable';
import 'rxjs/observable/of';

Che visivamente sembra OK rxjs/observable/ofin quanto esiste un file.

Dovrebbe essere:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

Il patching non funzionava per me, per qualsiasi motivo, quindi ho dovuto ricorrere a questo metodo:

import { of } from 'rxjs/observable/of'

// ...

return of(res)

Solo per aggiungere,

se ne usi molti, puoi importarli tutti

import 'rxjs/Rx'; 

come menzionato da @Thierry Templier. Ma penso che se stai usando un operatore limitato, allora dovresti importare un singolo operatore come

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/observable/of';

come menzionato da @uksz.

Perché 'rxjs / Rx' importerà tutti i componenti Rx che sicuramente costano le prestazioni.

Puoi anche importare tutti gli operatori in questo modo:

import {Observable} from 'rxjs/Rx';

Sto usando Angular 5.2 e RxJS 5.5.6

Questo codice non ha funzionato:

     import { Observable,of } from 'rxjs/Observable';

     getHeroes(): Observable<Hero[]> {
        return of(Hero[]) HEROES;

      }

Sotto il codice ha funzionato:

    import { Observable } from 'rxjs/Observable';
    import { Subscriber } from 'rxjs/Subscriber';

     getHeroes(): Observable<Hero[]> 
     {
          return Observable.create((observer: Subscriber<any>) => {
              observer.next(HEROES);
              observer.complete();
          });

      }

Metodo di chiamata:

this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);

Penso che potrebbero spostare / modificare la funzionalità () in RxJS 5.5.2

Questo dovrebbe funzionare correttamente, provalo.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

// "rxjs": "^5.5.10"
import { of } from 'rxjs/observable/of';

.... 
return of(res)

Aggiornato da Angular 5 / Rxjs 5 a Angular 6 / Rxjs 6?

È necessario modificare le importazioni e l'istanza. Dai un'occhiata al post sul blog di Damien

Tl; dr:

import { Observable, fromEvent, of } from 'rxjs';

const yourResult = Observable
    .create(of(yourObservable))
    .startWith(null)
    .map(x => x.someStringProperty.toLowerCase());

//subscribe to keyup event on input element
Observable
    .create(fromEvent(yourInputElement, 'keyup'))
    .debounceTime(5000)
    .distinctUntilChanged()
    .subscribe((event) => {
        yourEventHandler(event);
    });

RxJS 6

Quando si aggiorna alla versione 6 della RxJSlibreria e non si utilizza il rxjs-compatpacchetto il seguente codice

import 'rxjs/add/observable/of';   
  // ...
  return Observable.of(res);

deve essere cambiato in

import { of } from 'rxjs';
  // ...
  return of(res);

Per me (Angular 5 e RxJS 5) l'importazione del completamento automatico ha suggerito:

import { Observable } from '../../../../../node_modules/rxjs/Observable';

mentre al dovrebbe essere (con tutti gli operatori statici from, of, ect funzionare bene:

import { Observable } from 'rxjs/Observable';

Ho avuto questo problema oggi. Sto usando systemjs per caricare le dipendenze.

Stavo caricando Rxjs in questo modo:

...
    paths: {
        "rxjs/*": "node_modules/rxjs/bundles/Rx.umd.min.js"
    },
...

Invece di usare percorsi usa questo:

var map = {
...
'rxjs':                       'node_modules/rxjs',
...
}

var packages = {
...
'rxjs': { main: 'bundles/Rx.umd.min.js', defaultExtension: 'js' }
...
}

Questo piccolo cambiamento nel modo in cui systemjs carica la libreria ha risolto il mio problema.

Per Angular 5+:

import { Observable } from 'rxjs/Observable';dovrebbe funzionare. Il pacchetto di osservatori dovrebbe corrispondere anche all'importazione import { Observer } from 'rxjs/Observer';se stai usando osservatori

import {<something>} from 'rxjs'; fa un'importante importazione quindi è meglio evitarlo.

import 'rxjs/add/observable/of';

mostra un requisito di rxjs-compat

require("rxjs-compat/add/observable/of");

Non ho installato questo. Installato da

npm install rxjs-compat --save-dev

e la riesecuzione risolto il mio problema.

Nella rxjsv6, l' ofoperatore deve essere importato comeimport { of } from 'rxjs';

In qualche modo anche Webstorm l'ha resa così import {of} from 'rxjs/observable/of'; e tutto ha iniziato a funzionare