Angular 6: Property 'of' does not exist on type 'typeof Observable'

Question

I am using Angular 6 using "rxjs": "^6.0.0",

ERROR : Property 'of' does not exist on type 'typeof Observable'.

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable, Subject, pipe, of } from 'rxjs';


@Injectable()
export class MiTranslateLoaderService implements TranslateLoader {

  getTranslation(lang: string): Observable<any> {
    return Observable.of({
      lbl_select: 'Select',
    });
  }
}

Solution 1

Since RxJS 6 the correct and recommended way of using of() (RxJS 5 in Observable.of()) is this:

import { of } from 'rxjs';

I think this import { of } from 'rxjs/observable/of'; will work only while you have rxjs-compat package installed.

Solution 2

There are some updates in rxjs: ( Its rxjs6)

import { of } from 'rxjs';

It will work only when your app has rxjs-compat package installed

You can import of from rxjs:

import { Observable,of } from 'rxjs';

And simply return of()

 return of({
      lbl_select: 'Select',
    });

So your code will be:

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable, of } from 'rxjs';


@Injectable()
export class MiTranslateLoaderService implements TranslateLoader {

  getTranslation(lang: string): Observable<any> {
    return of({
      lbl_select: 'Select',
    });
  }
}

Solution 3

This is working for me.

Angular CLI 6.0.8

RxJS 6.2.2

import {of} from 'rxjs/index';


this.dataService.currentData

    .pipe(takeUntil(this.destroy$))
    .pipe(switchMap((myData:MyDataType) =>
      of(this.anotherService.get(myData._id))))
    .pipe(map((response) => {
         if(response instanceof Error) {
            console.log('error:');
            console.dir(response);
         }
         return response;
    }))
    .subscribe((data:any) => {
       doStuff(data);
      },
      response => {
        console.log('response error');
        console.log(response)
      },
      () => {
        console.log('response complete.');


      });

Solution 4

With the release of version 6, RxJS changed its internal package structure

https://www.academind.com/learn/javascript/rxjs-6-what-changed/#import-statement-update-path

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

Solution 5

You need to import of from rxjs/observable/of

import { of } from "rxjs/observable/of";

Usage:

return of({
  lbl_select: 'Select',
});

Update: for rxjs version 6 without rxjs-compat, you need to import of from rxjs itself as mentioned by @martin.

import { of } from 'rxjs';

Migration guide to rxjs6

View more solutions

Comments

[Rod Astrada]

It's important to note that you must change "return Observable.of" to just "return of"