CODEWITHSUNDEEP
typescriptrxjs5angular5
Readren
Readren

Reputation: 1270

Type Error: observable.of is not a function - [email protected] - [email protected] - angular5

After upgrading to [email protected] and converting all the RxJS imports, methods, and operators to the new >5.5 form, I get a type error at run-time saying that Observable.of is not a function. The same error happens with all the methods that are defined as a member of an extension of Observable, for example, Observable.fromEvent.

On the other hand, the methods that are defined as stand alone functions, like Observable.combineLatest run properly despite the compiler warns that them don't exists on type Observable.

Just to clarify, I had no problems with any operator (after converting them to the pipe form). Only with methods.

The solution I found was to replace:

import { of } from 'rxjs/observable/of';
import { fromEvent } from 'rxjs/observable/fromEvent';
...
const x = Observable.of(true, false);
const y = Observable.fromEvent(target, 'click');

with

import { ArrayObservable } from 'rxjs/observable/ArrayObservable';
import { FromEventObservable } from 'rxjs/observable/FromEventObservable';
...
const x = ArrayObservable.of(true, false);
const y = FromEventObservable.create(target, 'click');

But I think it should be a better way. Am I right?

Notes:

  1. I am forced to use "Ahead Of Time compilation" feature to build and serve the app because otherwise the angular injector would fail (but that is another question).
  2. I'm am aware of the existence of this other similar question. But that one applies to versions of RxJS less than < 5.5 according to the answer.

  3. ng --version gives:

    Angular CLI: 1.6.3, Node: 8.9.1, OS: win32 x64, Angular: 5.1.3,

    @angular/cli: 1.6.3, @angular-devkit/build-optimizer: 0.0.36, @angular-devkit/core: 0.0.22, @angular-devkit/schematics: 0.0.42, @ngtools/json-schema: 1.1.0, @ngtools/webpack: 1.9.3, @schematics/angular: 0.1.11, @schematics/schematics: 0.0.11, typescript: 2.5.3, webpack: 3.10.0,

Upvotes: 1

Views: 1533

Answers (1)

JB Nizet
JB Nizet

Reputation: 692231

When using lettable (now known as pipeable) operators and factory functions, those are just functions, not methods of Observables. So it should just be 

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

const x = of(true, false);
const y = fromEvent(target, 'click');

See how the documentation uses the range factory function.

Upvotes: 5

Related Questions