Observable.of n'est pas une fonction

J'ai un problème avec la Observable.offonction d' importation dans mon projet. Mon Intellij voit tout. Dans mon code j'ai:

import {Observable} from 'rxjs/Observable';

et dans mon code je l'utilise comme ça:

return Observable.of(res);

Des idées?

En fait, j'ai des importations en panne. Dans la dernière version de RxJS, nous pouvons l'importer comme ça:

import 'rxjs/add/observable/of';

Si quelqu'un rencontre ce problème lors de l'utilisation d'Angular 6 / rxjs 6, voir les réponses ici: Impossible d'utiliser Observable.of dans RxJs 6 et Angular 6

En bref, vous devez l'importer comme ceci:

import { of } from 'rxjs';

Et puis au lieu d'appeler

Observable.of(res);

juste utiliser

of(res);

Si vous utilisez Angular 6/7

import { of } from 'rxjs';

Et puis au lieu d'appeler

Observable.of(res);

juste utiliser

of(res);

Bien que cela semble absolument étrange, pour moi, il importait de capitaliser le «O» dans le chemin d'importation de import {Observable} from 'rxjs/Observable. Le message d'erreur avec observable_1.Observable.of is not a functionreste présent si j'importe l'Observable depuis rxjs/observable. Étrange mais j'espère que cela aide les autres.

Mon erreur stupide a été que j'ai oublié d'ajouter /addlorsque j'ai demandé l'observable.

Était:

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

Ce qui semble visuellement OK parce que le rxjs/observable/offichier existe, en fait.

Devrait être:

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

Le patch ne fonctionnait pas pour moi, quelle qu'en soit la raison, j'ai donc dû recourir à cette méthode:

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

// ...

return of(res)

Juste pour ajouter,

si vous en utilisez beaucoup, vous pouvez tout importer en utilisant

import 'rxjs/Rx'; 

comme mentionné par @Thierry Templier. Mais je pense que si vous utilisez un opérateur limité, vous devez importer un opérateur individuel comme

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

comme mentionné par @uksz.

Parce que 'rxjs / Rx' importera tous les composants Rx qui coûtent définitivement les performances.

Vous pouvez également importer tous les opérateurs de cette façon:

import {Observable} from 'rxjs/Rx';

J'utilise Angular 5.2 et RxJS 5.5.6

Ce code n'a pas fonctionné:

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

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

      }

Le code ci-dessous a fonctionné:

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

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

      }

Méthode d'appel:

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

Je pense qu'ils pourraient déplacer / modifier la fonctionnalité () dans RxJS 5.5.2

Cela devrait fonctionner correctement, essayez-le.

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

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

.... 
return of(res)

Mise à niveau de Angular 5 / Rxjs 5 vers Angular 6 / Rxjs 6?

Vous devez modifier vos importations et votre instanciation. Consultez l'article de blog de 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

Lors de la mise à niveau vers la version 6 de la RxJSbibliothèque sans utiliser le rxjs-compatpackage, le code suivant

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

doit être changé en

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

Pour moi (Angular 5 & RxJS 5), l'importation de saisie semi-automatique suggérée:

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

tout à devrait être (avec tous les opérateurs statiques from, of, ect fin de travail:

import { Observable } from 'rxjs/Observable';

J'ai eu ce problème aujourd'hui. J'utilise systemjs pour charger les dépendances.

Je chargeais les Rxjs comme ceci:

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

Au lieu d'utiliser des chemins, utilisez ceci:

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

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

Ce petit changement dans la façon dont systemjs charge la bibliothèque a résolu mon problème.

Pour Angular 5+:

import { Observable } from 'rxjs/Observable';devrait marcher. Le package observer doit également correspondre à l'importation import { Observer } from 'rxjs/Observer';si vous utilisez des observateurs

import {<something>} from 'rxjs'; fait une énorme importation, il vaut donc mieux l'éviter.

import 'rxjs/add/observable/of';

montre une exigence de rxjs-compat

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

Je ne l'ai pas installé. Installé par

npm install rxjs-compat --save-dev

et la réexécution a résolu mon problème.

Dans la rxjsv6, l' ofopérateur doit être importé en tant queimport { of } from 'rxjs';

D'une manière ou d'une autre, même Webstorm l'a fait comme ça import {of} from 'rxjs/observable/of'; et tout a commencé à fonctionner