Observable.of não é uma função

189

Estou tendo problemas com a Observable.offunção de importação no meu projeto. Meu Intellij vê tudo. No meu código eu tenho:

import {Observable} from 'rxjs/Observable';

e no meu código eu uso assim:

return Observable.of(res);

Alguma ideia?

uksz
fonte
5
Confira os documentos mais recentes se estiver usando o rxjs6 na importação e uso import { of } from 'rxjs'; return of(res); corretos github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths & github.com/ReactiveX/rxjs/blob/master/…
fidev 17/05/19

Respostas:

232

Na verdade eu tenho importações desarrumadas. Na versão mais recente do RxJS, podemos importá-lo assim:

import 'rxjs/add/observable/of';
uksz
fonte
21
Após minha 192ª edição, notei que no meu código estava importando de operator/- rxjs/add/operator/of- em vez de observable/. D'oh.
EricRobertBrewer
Descobri que não preciso usar essa declaração em um dos projetos angulares. Mas no outro, tenho que importá-lo. Eu não entendo as diferenças. Você conhece os motivos?
Niaomingjian 14/09/19
1
Versão angular, talvez ?! Não precisei fazer isso para 4.3.2, mas fiz para 5.0.0.
Draghon
@Draghon: Exatamente o mesmo comigo. Eu não precisava fazer isso para o 4.4, agora faço para o 5.2. Ainda mais estranho, eu só tenho que incluí-lo em um arquivo e todos os outros arquivos .ts simplesmente pegam e estão prontos.
JP ten Berge
2
E se eu conseguir Não encontrar o módulo "rxjs / add / observable / of"?
Enrico
167

Se alguém tiver esse problema ao usar o Angular 6 / rxjs 6, veja as respostas aqui: Não foi possível usar o Observable.of nos RxJs 6 e Angular 6

Em suma, você precisa importá-lo assim:

import { of } from 'rxjs';

E então, em vez de ligar

Observable.of(res);

Apenas use

of(res);
jgosar
fonte
2
Obrigado! Descobrir as importações no Rx é sempre uma fonte de frustração tão grande para mim por causa da volatilidade da API.
DomenicDatti
43

Embora pareça absolutamente estranho, comigo importava capitalizar o 'O' no caminho de importação de import {Observable} from 'rxjs/Observable. A mensagem de erro observable_1.Observable.of is not a functionpermanece presente se eu importar o Observable de rxjs/observable. Estranho, mas espero que ajude os outros.

Mark Langer
fonte
39

Se você estiver usando Angular 6/7

import { of } from 'rxjs';

E então, em vez de ligar

Observable.of(res);

Apenas use

of(res);
Akitha_MJ
fonte
Isso ocorre devido a alterações na versão do RxJS de 5 para 6, que introduziram muitas alterações recentes. Você pode conferir como migrar seu projeto Angular aqui: rxjs.dev/guide/v6/migration
Edric
29

Meu erro bobo foi que eu esqueci de acrescentar /addao exigir o observável.

Foi:

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

Que visualmente parece OK, porque o rxjs/observable/ofarquivo existe.

Deveria estar:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
Olho
fonte
como @ Shaun_grady apontou, de alguma forma isso não funciona. Eu fui com a sua proposta
Sonne
20

O patch não estava funcionando para mim, por qualquer motivo, então tive que recorrer a este método:

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

// ...

return of(res)
Shaun Grady
fonte
Esta não é uma solução alternativa, é a sintaxe do Angular> = 6.0.0. importar {de} de 'rxjs' foi bom para mim. Veja stackoverflow.com/questions/38067580/…
mark_h
18

Só para adicionar,

se você estiver usando muitos deles, poderá importar todos os

import 'rxjs/Rx'; 

como mencionado por @Thierry Templier. Mas acho que se você estiver usando um operador limitado, deverá importar um operador individual como

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

como mencionado por @uksz.

Porque 'rxjs / Rx' importará todos os componentes do Rx que definitivamente custam desempenho.

Comparação

dharmesh kaklotar
fonte
1
Descobri que não preciso usar essa declaração em um dos projetos angulares. Mas no outro, tenho que importá-lo. Eu não entendo as diferenças. Você conhece os motivos?
Niaomingjian 14/09/19
16

Você também pode importar todos os operadores desta maneira:

import {Observable} from 'rxjs/Rx';
Thierry Templier
fonte
7
Eu não recomendaria a importação dessa maneira, pois essa é uma biblioteca bastante grande e "of" é uma parte muito pequena dela.
methgaard
2
@methgaard import { Observable } from 'rxjs/Observable' import 'rxjs/add/observable/of';não funciona. Só import {Observable} from 'rxjs/Rx';funciona. A versão é 5.4.2
niaomingjian
@methgaard Me desculpe. Eu cometi um erro. O fato é que eu entendi Observable_1.Observable.of(...).delay(...).timeout is not a function. Eu não useiimport 'rxjs/add/operator/timeout'
niaomingjian 13/09/17
Também aumenta o tamanho do pacote
Amirhossein Mehrvarzi 23/09
5

Estou usando Angular 5.2 e RxJS 5.5.6

Este código não funcionou:

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

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

      }

Abaixo o código funcionou:

    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étodo de chamada:

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

Eu acho que eles podem ter mudado / alterado a funcionalidade () no RxJS 5.5.2

karunakar bhogyari
fonte
4

Isso deve funcionar corretamente, apenas tente.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
alok singh
fonte
4
// "rxjs": "^5.5.10"
import { of } from 'rxjs/observable/of';

.... 
return of(res)
letanthang
fonte
Esta é uma resposta apenas de código. Você poderia explicar o que está tentando sugerir?
Peter Wippermann
1
Olá, devemos importar apenas o operador de que precisamos, não todo o "Observável" devido a um problema de desempenho. Na nova versão (^ 5.5.10), o caminho certo para importar o operador "of" é: import {of} de 'rxjs / observable / of' ... Funciona no meu caso. Vou editar minha resolução. Obrigado Peter.
Letanthang
4

Atualizou de Angular 5 / Rxjs 5 para Angular 6 / Rxjs 6?

Você deve alterar suas importações e sua instanciação. Confira o post 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);
    });
KVarmark
fonte
1
Usando o 6.0, a tentativa de se inscrever no Observable.create (of (val)) resultou em "this._subscribe não é uma função". Em vez disso, criei um observável com sucesso apenas chamando "of (val)".
Jim Norman
3

RxJS 6

Ao atualizar para a versão 6 da RxJSbiblioteca e não usar o rxjs-compatpacote, o código a seguir

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

tem que ser transformado em

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

Eu tive esse problema hoje. Estou usando o systemjs para carregar as dependências.

Eu estava carregando os Rxjs assim:

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

Em vez de usar caminhos, use o seguinte:

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

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

Essa pequena alteração na maneira como o systemjs carrega a biblioteca corrigiu meu problema.

Eli
fonte
A pergunta se aplica ao Angular 2. Ele não funciona bem com o módulo RxJS UMD .
Estus Flask
2

Para Angular 5+:

import { Observable } from 'rxjs/Observable';Deveria trabalhar. O pacote observador também deve corresponder à importação import { Observer } from 'rxjs/Observer';se você estiver usando observadores

import {<something>} from 'rxjs'; faz uma importação enorme, por isso é melhor evitá-la.

SS-
fonte
2

Para mim (Angular 5 e RxJS 5), a importação do preenchimento automático sugeriu:

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

enquanto a deve ser (com todos os operadores estáticos from, of, ect funcionando bem:

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

mostra um requisito de rxjs-compat

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

Eu não tinha isso instalado. Instalado por

npm install rxjs-compat --save-dev

e executar novamente corrigiu meu problema.

Esaith
fonte
1

Na rxjsv6, o ofoperador deve ser importado comoimport { of } from 'rxjs';

Lasantha Basnayake
fonte
0

De alguma forma, até o Webstorm fez assim import {of} from 'rxjs/observable/of'; e tudo começou a funcionar

Yevheniy Potupa
fonte