The observed function is not a function

Question

I am having a problem importing the Observable.of function in my project. My Intellij sees everything. In my code, I have:

 import {Observable} from 'rxjs/Observable'; 

and in my code I use it like this:

 return Observable.of(res); 

Any ideas?

Answer 1

In fact, my import is messed up. In the latest version of RxJS, we can import it like this:

 import 'rxjs/add/observable/of'; 

Answer 2

If someone has this problem when using Angular 6 / rxjs 6, see the answers here: Failed to use Observable.of in RxJs 6 and Angular 6

In short, you need to import it like this:

 import { of } from 'rxjs'; 

And then instead of ringing

 Observable.of(res); 

just use

 of(res); 

Answer 3

Although this sounds completely strange, it was important for me to use "O" in the import path import {Observable} from 'rxjs/Observable . The error message with observable_1.Observable.of is not a function remains present if I import Observable from rxjs/observable . Strange, but I hope this helps others.

Answer 4

My stupid mistake was that I forgot to add /add , requiring an observable.

It was:

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

Which visually looks OK, because the rxjs/observable/of file essentially exists.

Must be:

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

Answer 5

Just add

if you use many of them, you can import everything using

 import 'rxjs/Rx'; 

as mentioned by Tempier @Thierry. But I think that if you use a restricted operator, you should import a separate operator, for example

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

as pointed out by @uksz.

Because 'rxjs / Rx' imports all the Rx components, which will certainly evaluate performance.

Answer 6

Patching did not work for me for some reason, so I had to resort to this method:

 import { of } from 'rxjs/observable/of' // ... return of(res) 

Answer 7

You can also import all statements as follows:

 import {Observable} from 'rxjs/Rx'; 

Answer 8

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

Answer 9

Updated from Angular 5 / Rxjs 5 to Angular 6 / Rxjs 6?

You must change your import and your implementation. Check out Damien's blog post

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 10

I am using Angular 5.2 and RxJS 5.5.6

This code did not work:

  import { Observable,of } from 'rxjs/Observable'; getHeroes(): Observable<Hero[]> { return of(Hero[]) HEROES; } 

The code below works:

  import { Observable } from 'rxjs/Observable'; import { Subscriber } from 'rxjs/Subscriber'; getHeroes(): Observable<Hero[]> { return Observable.create((observer: Subscriber<any>) => { observer.next(HEROES); observer.complete(); }); } 

Call Method:

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

I think they could move / change functionality () in RxJS 5.5.2

Answer 11

This should work correctly, just try.

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

Answer 12

I had this problem today. I use systemjs to load dependencies.

I downloaded Rxjs as follows:

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

Instead of using paths, use this:

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

This small change in the way the system loads the library fixed my problem.

Answer 13

For angular 5+:

import { Observable } from 'rxjs/Observable'; should work. The observer package must match the import, as well as import { Observer } from 'rxjs/Observer'; if you use observers this

import {<something>} from 'rxjs'; makes huge imports, so it’s better to avoid it.

Answer 14

Rxjs 6

When upgrading to version 6 of the RxJS library and without using rxjs-compat following code

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

should be changed to

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

Answer 15

 import 'rxjs/add/observable/of'; 

shows rxjs-compat requirement

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

I did not have this installed. Established

 npm install rxjs-compat --save-dev 

and restarting fixed my problem.

Answer 16

In rxjs v6, of operator must be imported as import { of } from 'rxjs';

Answer 17

Somehow even Webstorm made such import {of} from 'rxjs/observable/of'; and everything started to work

Answer 18

For me (Angular 5 & RxJS 5), autocomplete import suggested:
import { Observable } from '../../../../../node_modules/rxjs/Observable';
while it should be (with all static operators from , of , ect it works fine:
import { Observable } from 'rxjs/Observable';

Answer 19

If you are using Angular 6/7

 import { of } from 'rxjs'; 

And then instead of ringing

 Observable.of(res); 

just use

 of(res);