web-dev-qa-db-fra.com

Observable.of n'est pas une fonction

J'ai des problèmes avec l'importation de la fonction Observable.of 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?

angularrxjs
165
uksz

En fait, j'ai des importations gâchées. Dans la dernière version de RxJS, nous pouvons l'importer comme ça:

import 'rxjs/add/observable/of';
222
uksz

Si quelqu'un rencontre ce problème lors de l'utilisation de Angular 6/rxjs 6, consultez 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);
129
jgosar

Bien que cela semble absolument étrange, il importait pour moi 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 function reste présent si j'importe l'observable de rxjs/observable. Étrange mais j'espère que ça aide les autres.

42
Mark Langer

Ma bêtise est d’oublier d’ajouter /add à la demande de l’observable.

était:

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

Ce qui semble visuellement correct parce que le fichier rxjs/observable/of existe, en fait.

devrait être:

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

Si vous utilisez Angular 6/7

import { of } from 'rxjs';

Et puis au lieu d'appeler

Observable.of(res);

juste utiliser

of(res);
19
Akitha_MJ

Patching ne fonctionnait pas pour moi, peu importe la raison, j'ai donc dû recourir à cette méthode:

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

// ...

return of(res)
18
Shaun Grady

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, ce qui coûte vraiment de la performance.

Comparison

18
dharmesh kaklotar

Vous pouvez également importer tous les opérateurs de cette manière:

import {Observable} from 'rxjs/Rx';
16
Thierry Templier

J'utilise Angular 5.2 et RxJS 5.5.6

Ce code n'a pas fonctionné not :

     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/changer la fonctionnalité de () dans RxJS 5.5.2

4
karunakar bhogyari

Amélioré de Angular 5/Rxjs 5 à Angular 6/Rxjs 6?

Vous devez modifier vos importations et votre instanciation. Découvrez le 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);
    });
4
KVarmark
// "rxjs": "^5.5.10"
import { of } from 'rxjs/observable/of';

.... 
return of(res)
4
letanthang

Cela devrait fonctionner correctement juste l'essayer.

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

Pour Angular 5+:

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

import {<something>} from 'rxjs'; fait une énorme importation, il est donc préférable de l'éviter.

2
SS-

RxJS 6

Lors de la mise à niveau vers la version 6 de la bibliothèque RxJS sans utiliser le package rxjs-compat, le code suivant

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

doit être changé en

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

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.

2
Eli

Pour moi (Angular 5 & RxJS 5), l’importation autocomplete suggérait:

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

tandis que devrait être (avec tous les opérateurs statiques from, of, e.c.t fonctionne bien:

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

montre une exigence de rxjs-compat

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

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

npm install rxjs-compat --save-dev

et relancer corrigé mon problème.

1
Esaith

Dans rxjs v6, l'opérateur of doit être importé sous le nom import { of } from 'rxjs';

1
Lasantha Basnayake

En quelque sorte, même Webstorm l'a fait comme ceci import {of} from 'rxjs/observable/of'; et tout a commencé à fonctionner

0
Yevheniy Potupa