example - observables angular 5

Observable.of no es una función

Question

Tengo problemas con la importación de la función Observable.of 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?

Answer 1

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

Answer 2

De alguna manera, incluso Webstorm lo hizo como esta import {of} from ''rxjs/observable/of''; y todo empezó a funcionar

Answer 3

En rxjs v6, el operador debe importarse como import { of } from ''rxjs'';

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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)

Answer 8

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

Estaba:

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

Que visualmente se ve bien porque rxjs/observable/of file, de hecho, existe.

Debiera ser:

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

Answer 9

Para Angular 5+:

import { Observable } from ''rxjs/Observable''; Deberia trabajar. El paquete del observador debe coincidir con la importación, así como import { Observer } from ''rxjs/Observer''; si estás usando observadores que es

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

Answer 10

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

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

while to should be (con todos los operadores estáticos from , of , ect funcionando bien:

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

Answer 11

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

Answer 12

Si está usando Angular 6/7

import { of } from ''rxjs'';

Y luego en lugar de llamar

Observable.of(res);

Solo usa

of(res);

Answer 13

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.

Answer 14

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

import {Observable} from ''rxjs/Rx'';

Answer 15

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.

Answer 16

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

Answer 17

RxJS 6

Al actualizar a la versión 6 de la biblioteca RxJS y no usar el paquete rxjs-compat , 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);

Answer 18

// "rxjs": "^5.5.10"
import { of } from ''rxjs/observable/of'';
....
return of(res)

Answer 19

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.