Observable.of is not a function

Question

I am having issue with importing Observable.of function in my project. My Intellij sees everything. In my code I have:

import {Observable} from          


        

Answer 1

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

Answer 2

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.

Answer 3

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

.... 
return of(res)

Answer 4

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.

Answer 5

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)

Answer 6

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