Observable.of is not a function

问题:

I am having issue with importing 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 that:

return Observable.of(res);

Any ideas?

回答1:

Actually I have imports messed up. In latest version of RxJS we can import it like that:

import 'rxjs/add/observable/of';

回答2:

If anybody is having this problem while using Angular 6/rxjs 6 see the answers here: Could not 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 calling

Observable.of(res);

just use

of(res);

回答3:

Although it sounds absolutely strange, with me it mattered to capitalize the 'O' in the import path of import {Observable} from 'rxjs/Observable. The error message with observable_1.Observable.of is not a function stays present if I import the Observable from rxjs/observable. Strange but I hope it helps others.

回答4:

My silly mistake was that I forgot to add /add when requiring the observable.

Was:

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

Which visually looks OK becasue rxjs/observable/of file, in fact, exists.

Should be:

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

回答5:

Just to add,

if you're using many of them then you can import all using

import 'rxjs/Rx'; 

as mentioned by @Thierry Templier. But I think If you are using limited operator then you should import individual operator like

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

as mentioned by @uksz.

Because 'rxjs/Rx' will import all the Rx components which definitely cost performance.

回答6:

You could also import all operators this way:

import {Observable} from 'rxjs/Rx';

回答7:

Patching wasn't working for me, for whatever reason, so I had to resort to this method:

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

// ...

return of(res)

回答8:

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

.... 
return of(res)

回答9:

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

You must change your imports and your instantiation. 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);
    });

回答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;

      }

Below code worked:

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

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

      }

Calling method:

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

I think they might moved/changed of() functionality in RxJS 5.5.2

回答11:

This should work properly just try it.

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

回答12:

I had this problem today. I'm using systemjs to load the dependencies.

I was loading the Rxjs like this:

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

Instead of use paths use this:

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

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

This little change in the way systemjs loads the library fixed my problem.

回答13:

For Angular 5+ :

import { Observable } from 'rxjs/Observable';should work. The observer package should match the import as well import { Observer } from 'rxjs/Observer'; if you're using observers that is

import {<something>} from 'rxjs'; does a huge import so it's better to avoid it.

回答14:

RxJS 6

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

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

has to be changed into

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

回答15:

import 'rxjs/add/observable/of';

shows a requirement of rxjs-compat

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

I did not have this installed. Installed by

npm install rxjs-compat --save-dev

and rerunning fixed my issue.

回答16:

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

回答17:

If you are using Angular 6 /7

import { of } from 'rxjs';

And then instead of calling

Observable.of(res);

just use

of(res);

回答18:

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

回答19:

For me (Angular 5 & RxJS 5) the autocomplete import suggested:
import { Observable } from '../../../../../node_modules/rxjs/Observable';
while to should be (with all static operators from, of, e.c.t working fine:
import { Observable } from 'rxjs/Observable';