Observable.of is not a function

Question

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

import 'rxjs/add/observable/of';

If anybody is having this problem while using Angular >= 6 and rxjs version 6 or greater, 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);

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.

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

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)

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.