Rxjs: Property 'merge' does not exist on type 'typeof Observable'

[topheman]

RxJS version:: Both v5.0.0-beta.6 & v5.0.0-beta.7

Code to reproduce:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/merge';
// import {merge} from 'rxjs/operator/merge';

const minInterval = 500;

export const compileTickObservable = () => {

  const intervals1$ = Observable.interval(minInterval)
    .map(val => val * minInterval);

  const intervals2$ = Observable.interval(minInterval)
    .map(val => val * minInterval * 2);

  // const matchedItems$ = merge.call(Observable, [
  //   intervals1$,
  //   intervals2$
  // ]).map(val => val);

  const matchedItems$ = Observable.merge(
    intervals1$,
    intervals2$
  ).map(val => val);

  return matchedItems$;
};

Runs in Angular2, but is RxJS specific - brief version:

import {compileTickObservable}  from '../../store/observables/tick.ts'; // file above

let logs = [];
const tick$ = compileTickObservable();
const subTick = tick$.subscribe(item => {
 logs = [item, ...logs].slice(0, 15);
});

Error:

TypeScript compiler returns this error:

[default] /Users/Tophe/projects/front/angular2-sandbox/src/store/observables/tick.ts:21:36
    Property 'merge' does not exist on type 'typeof Observable'.

Runtime error (The relevant part is Observable.merge is not a function)

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Observable_1.Observable.merge is not a function
ORIGINAL STACKTRACE:
TypeError: Observable_1.Observable.merge is not a function
    at Object.exports.compileTickObservable (http://localhost:8080/bundle.js:63538:50)
    at new ColorInterval (http://localhost:8080/bundle.js:62596:33)
    at DebugAppView._View_ColorInterval_Host0.createInternal (ColorInterval_Host.template.js:15:29)
    at DebugAppView.AppView.create (http://localhost:8080/bundle.js:29952:22)
    at DebugAppView.create (http://localhost:8080/bundle.js:30145:45)
    at ComponentFactory.create (http://localhost:8080/bundle.js:26702:37)
    at ViewContainerRef_.createComponent (http://localhost:8080/bundle.js:27353:46)
    at http://localhost:8080/bundle.js:29221:30
    at ZoneDelegate.invoke (http://localhost:8080/bundle.js:15917:30)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (http://localhost:8080/bundle.js:26270:42)
    at ZoneDelegate.invoke (http://localhost:8080/bundle.js:15916:36)
    at Zone.run (http://localhost:8080/bundle.js:15810:45)
    at http://localhost:8080/bundle.js:16165:59
    at ZoneDelegate.invokeTask (http://localhost:8080/bundle.js:15950:39)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (http://localhost:8080/bundle.js:26261:42)
    at ZoneDelegate.invokeTask (http://localhost:8080/bundle.js:15949:44)
    at Zone.runTask (http://localhost:8080/bundle.js:15850:49)
    at drainMicroTaskQueue (http://localhost:8080/bundle.js:16068:37)
    at run (http://localhost:8080/bundle.js:13208:23)
    at http://localhost:8080/bundle.js:13221:29
    at MutationObserver.flush (http://localhost:8080/bundle.js:13560:10)
ERROR CONTEXT:
[object Object]

Additional information:

As you can see in the commented code, since I was told _Observable.merge is not a function_, I tried other ways to import and use it. But still, it could import 'rxjs/add/observable/interval'.

I've tried with both v5.0.0-beta.6 & v5.0.0-beta.7, if anyone has an idea ?...

[topheman]

Seems like

replacing: import {Observable} from 'rxjs/Observable'

by: import {Observable} from 'rxjs/Rx'

makes it work.

[kwonoj]

In above snippet, you imported observable operator 'rxjs/add/operator/merge' and tried to use static creation method Observable.merge, not able to find it.

operator gives instance method to observables, such as

import 'rxjs/add/operator/merge';

const a = Observable.of(1);
a.merge(Observable.of(2)).subscribe(...);

while static method allows to create observable via

import 'rxjs/add/observable/merge';

Observable.merge(Observable.of(1), Observable.of(2)).subscribe(...);

[topheman]

Thanks @kwonoj for the explanation.

[jamie-pate]

Where is the documentation for this stuff? it's constantly mystifying :)

[DevSide]

I can't get it work with import {Observable} from 'rxjs/Observable' as well.

The problem of doing import {Observable} from 'rxjs/Rx' is that everything is imported which is not acceptable for production bundling.

What do you recommend ?

Edit: I found a solution using import { merge } from 'rxjs/observable/merge'; without importing Observable.

[mfp22]

I got it to work with
import 'rxjs/add/observable/merge';

[trsh]

import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/startWith';

gives Property 'startWith' does not exist on type 'typeof Observable'.

Ide: Atom

[kentoj]

had a similar problem with Observable.combineLatest in Typescript and Angular 4 with Ionic 3. The fix was as @topheman stated to import { Observable } from 'rxjs/Rx';

[jmpreston]

import { Observable } from 'rxjs/Rx'; is blacklisted according to the Webstorm IDE.

[realappie]

Importing observables feels like a mess right now, sometimes you need to add operators like this.

import 'rxjs/add/operator/startWith'; with some odd combination of an Observable import. I hope we will suffer less from this with the lettable operators upgrade.

[sherlock1982]

@svstartuplab it's blacklisted in your tslint.json, Webstorm IDE has nothing to do with blacklisting.

I have the same situation today. I don't want to use pipeable operators but use the form import 'rxjs/add/observable/merge';. The funny thing is that everything gets imported properly except merge!

Looks like merge module was eliminated from the build for some reason

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.