Observable.of n'est pas une fonction


199

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?


5
Consultez les derniers documents si vous utilisez rxjs6 sur l'importation et l'utilisation import { of } from 'rxjs'; return of(res); correctes github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths & github.com/ReactiveX/rxjs/blob/master/…
fidev

Réponses:


235

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';

21
Après ma 192e double prise, j'ai remarqué que dans mon code, j'importais depuis operator/- rxjs/add/operator/of- au lieu de observable/. D'oh.
EricRobertBrewer

J'ai trouvé que je n'ai pas besoin d'utiliser cette déclaration dans l'un des projets angulaires. Mais dans l'autre, je dois l'importer. Je ne comprends pas les différences. Connaissez-vous les raisons?
niaomingjian

1
Version angulaire, peut-être?! Je n'ai pas eu à faire cela pour 4.3.2 mais je l'ai fait pour 5.0.0.
Draghon

@Draghon: Exactement la même chose avec moi. Je n'ai pas eu à le faire pour 4.4, je le fais maintenant pour 5.2. Encore plus étrange, je n'ai qu'à l'inclure dans un fichier et tous les autres fichiers .ts le ramassent simplement et sont prêts à partir.
JP ten Berge

2
Et si j'obtiens le module "rxjs / add / observable / of" introuvable?
Enrico

179

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

2
Merci! Comprendre les importations dans Rx est toujours une source de frustration énorme pour moi en raison de la volatilité des API.
DomenicDatti

47

Si vous utilisez Angular 6/7

import { of } from 'rxjs';

Et puis au lieu d'appeler

Observable.of(res);

juste utiliser

of(res);

Cela est dû aux changements apportés à la version RxJS de 5 à 6 qui ont introduit de nombreux changements de rupture. Vous pouvez vérifier comment migrer votre projet Angular ici: rxjs.dev/guide/v6/migration
Edric

44

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.


30

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';

comme @Shaun_grady l'a souligné, cela ne fonctionne pas. Je suis allé avec sa proposition
Sonne

21

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)

Ce n'est pas une solution, c'est la syntaxe pour Angular> = 6.0.0. import {of} de 'rxjs' me convenait. Voir stackoverflow.com/questions/38067580/…
mark_h

18

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.

Comparaison


1
J'ai trouvé que je n'ai pas besoin d'utiliser cette déclaration dans l'un des projets angulaires. Mais dans l'autre, je dois l'importer. Je ne comprends pas les différences. Connaissez-vous les raisons?
niaomingjian

16

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

import {Observable} from 'rxjs/Rx';

7
Je ne recommanderais pas d'importer de cette façon, car il s'agit d'une assez grande bibliothèque et "of" en est une toute petite partie.
methgaard

2
@methgaard import { Observable } from 'rxjs/Observable' import 'rxjs/add/observable/of';ne fonctionne pas. Fonctionne seulement import {Observable} from 'rxjs/Rx';. La version est 5.4.2
niaomingjian

@methgaard Je suis désolé. J'ai fait une erreur. Le fait est que j'ai Observable_1.Observable.of(...).delay(...).timeout is not a function. Je n'ai pas utiliséimport 'rxjs/add/operator/timeout'
niaomingjian

Cela augmente également la taille du paquet
Amirhossein Mehrvarzi

5

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


4

Cela devrait fonctionner correctement, essayez-le.

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

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

.... 
return of(res)

Ceci est une réponse de code uniquement. Pouvez-vous expliquer ce que vous essayez de suggérer?
Peter Wippermann

1
Salut, nous ne devrions importer que l'opérateur dont nous avons besoin, pas l'ensemble "Observable" en raison d'un problème de performances. Dans la nouvelle version (^ 5.5.10), la bonne façon d'importer l'opérateur "of" est: import {of} depuis 'rxjs / observable / of' ... Cela fonctionne pour mon cas. Je vais modifier ma résolution. Merci Peter.
letanthang

4

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

1
En utilisant la version 6.0, la tentative de souscription à Observable.create (of (val)) aboutissait à "this._subscribe is not a function". Au lieu de cela, j'ai réussi à créer une observable en appelant simplement "of (val)".
Jim Norman

3

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

3

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';

2

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.


La question s'applique à Angular 2. Il ne fonctionne pas bien avec le module RxJS UMD .
Estus Flask

2

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.


1
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.



0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.