Observable.of no es una función

192

Tengo problemas con la Observable.offunción de importación en mi proyecto. Mi Intellij lo ve todo. En mi código tengo:

import {Observable} from 'rxjs/Observable';

y en mi código lo uso así:

return Observable.of(res);

¿Algunas ideas?

uksz
fuente
55
Consulte los últimos documentos si está utilizando rxjs6 en la importación y uso correctos import { of } from 'rxjs'; return of(res); github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths & github.com/ReactiveX/rxjs/blob/master/…
fidev

Respuestas:

232

En realidad tengo las importaciones en mal estado. En la última versión de RxJS podemos importarlo así:

import 'rxjs/add/observable/of';
uksz
fuente
21
Después de mi 192a toma doble, noté que en mi código estaba importando desde operator/- rxjs/add/operator/of- en lugar de observable/. D'oh
EricRobertBrewer
Descubrí que no necesito usar esta declaración en uno de los proyectos angulares. Pero en el otro, tengo que importarlo. No entiendo las diferencias. ¿Sabes las razones?
niaomingjian
1
¿Versión angular, tal vez? No tuve que hacer esto para 4.3.2 pero sí para 5.0.0.
Draghon
@Draghon: Exactamente lo mismo conmigo. No tuve que hacerlo por 4.4, lo hago ahora por 5.2. Aún más extraño, solo tengo que incluirlo en un archivo y todos los demás archivos .ts simplemente lo recogen y listo.
JP ten Berge
2
¿Qué sucede si no puedo encontrar el módulo "rxjs / add / observable / of"?
Enrico
169

Si alguien tiene este problema mientras usa Angular 6 / rxjs 6, vea las respuestas aquí: No se pudo usar Observable.of en RxJs 6 y Angular 6

En resumen, debe importarlo así:

import { of } from 'rxjs';

Y luego en lugar de llamar

Observable.of(res);

Solo usa

of(res);
jgosar
fuente
2
¡Gracias! Descubrir las importaciones en Rx siempre es una gran fuente de frustración para mí debido a la volatilidad de la API.
DomenicDatti
43

Aunque suena absolutamente extraño, para mí fue importante capitalizar la 'O' en la ruta de importación de import {Observable} from 'rxjs/Observable. El mensaje de error con observable_1.Observable.of is not a functionpermanece presente si importo el Observable desde rxjs/observable. Extraño pero espero que ayude a otros.

Mark Langer
fuente
42

Si está usando Angular 6/7

import { of } from 'rxjs';

Y luego en lugar de llamar

Observable.of(res);

Solo usa

of(res);
Akitha_MJ
fuente
Esto se debe a los cambios en la versión RxJS de 5 a 6 que introdujeron muchos cambios importantes. Puede consultar cómo migrar su proyecto Angular aquí: rxjs.dev/guide/v6/migration
Edric el
29

Mi error tonto fue que olvidé agregar /addcuando requería lo observable.

Estaba:

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

Que visualmente se ve bien porque el rxjs/observable/ofarchivo, de hecho, existe.

Debiera ser:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
Ojo
fuente
Como señaló @Shaun_grady, de alguna manera esto no funciona. Fui con su propuesta
Sonne
20

Los parches no me funcionaban, por cualquier razón, así que tuve que recurrir a este método:

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

// ...

return of(res)
Shaun Grady
fuente
Esta no es una solución, esta es la sintaxis para Angular> = 6.0.0. Importar {de} desde 'rxjs' estuvo bien para mí. Ver stackoverflow.com/questions/38067580/…
mark_h
18

Solo para agregar,

si está usando muchos de ellos, puede importarlos todos usando

import 'rxjs/Rx'; 

como lo mencionó @Thierry Templier. Pero creo que si está utilizando un operador limitado, debe importar un operador individual como

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

como lo menciona @uksz.

Porque 'rxjs / Rx' importará todos los componentes Rx que definitivamente cuestan rendimiento.

Comparación

Dharmesh Kaklotar
fuente
1
Descubrí que no necesito usar esta declaración en uno de los proyectos angulares. Pero en el otro, tengo que importarlo. No entiendo las diferencias. ¿Sabes las razones?
niaomingjian
16

También puede importar todos los operadores de esta manera:

import {Observable} from 'rxjs/Rx';
Thierry Templier
fuente
77
No recomendaría importar de esta manera, ya que esta es una biblioteca bastante grande y "of" es una parte muy pequeña.
metthard
2
@methgaard import { Observable } from 'rxjs/Observable' import 'rxjs/add/observable/of';no funciona. Solo import {Observable} from 'rxjs/Rx';funciona. La versión es 5.4.2
niaomingjian
@methgaard lo siento. Cometí un error. El hecho es que lo tengo Observable_1.Observable.of(...).delay(...).timeout is not a function. No import 'rxjs/add/operator/timeout'
utilicé
También aumenta el tamaño del paquete
Amirhossein Mehrvarzi
5

Estoy usando Angular 5.2 y RxJS 5.5.6

Este código no funcionó:

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

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

      }

El siguiente código funcionó:

    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 llamada:

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

Creo que podrían mover / cambiar la funcionalidad () en RxJS 5.5.2

karunakar bhogyari
fuente
4

Esto debería funcionar correctamente, solo pruébalo.

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

.... 
return of(res)
letanthang
fuente
Esta es una respuesta de solo código. ¿Podría explicar lo que intenta sugerir?
Peter Wippermann
1
Hola, solo debemos importar el operador que necesitamos, no todo el "Observable" debido a un problema de rendimiento. En la nueva versión (^ 5.5.10), la forma correcta de importar el operador "of" es: import {of} desde 'rxjs / observable / of' ... Funciona para mi caso. Editaré mi resolución. Gracias Peter
letanthang
4

¿Actualizado de Angular 5 / Rxjs 5 a Angular 6 / Rxjs 6?

Debe cambiar sus importaciones y su instanciación. Mira la publicación 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);
    });
KVarmark
fuente
1
Con 6.0, intentar suscribirse a Observable.create (of (val)) resultó en "this._subscribe no es una función". En cambio, creé con éxito un observable simplemente llamando "of (val)".
Jim Norman
3

RxJS 6

Al actualizar a la versión 6 de la RxJSbiblioteca y no usar el rxjs-compatpaquete, el siguiente código

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

tiene que ser cambiado a

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

Para mí (Angular 5 y RxJS 5) la importación de autocompletar sugirió:

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

mientras que debería ser (con todos los operadores estáticas from, of, ect funciona bien:

import { Observable } from 'rxjs/Observable';
Tomás
fuente
2

Tuve este problema hoy. Estoy usando systemjs para cargar las dependencias.

Estaba cargando los Rxjs así:

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

En lugar de usar rutas, use esto:

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

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

Este pequeño cambio en la forma en que systemjs carga la biblioteca solucionó mi problema.

Eli
fuente
La pregunta se aplica a Angular 2. No funciona bien con el módulo RxJS UMD .
Estus Flas el
2

Para Angular 5+:

import { Observable } from 'rxjs/Observable';Deberia trabajar. El paquete del observador también debe coincidir con la importaciónimport { Observer } from 'rxjs/Observer'; si está utilizando observadores que son

import {<something>} from 'rxjs'; hace una gran importación, así que es mejor evitarlo.

SS-
fuente
1
import 'rxjs/add/observable/of';

muestra un requisito de rxjs-compat

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

No tenía esto instalado. Instalado por

npm install rxjs-compat --save-dev

y volver a ejecutar solucionó mi problema.

Esaith
fuente
1

En rxjsv6, el ofoperador debe importarse comoimport { of } from 'rxjs';

Lasantha Basnayake
fuente
0

De alguna manera, incluso Webstorm lo hizo así import {of} from 'rxjs/observable/of'; y todo comenzó a funcionar

Yevheniy Potupa
fuente