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?


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

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

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.


42

Si está usando Angular 6/7

import { of } from 'rxjs';

Y luego en lugar de llamar

Observable.of(res);

Solo usa

of(res);

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

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)

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


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

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


4

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

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

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

.... 
return of(res)

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

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

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

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.


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.


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.



0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.