Can't find `combineLatest` in RxJS 5.0

Question

The following code it's causing me a Observable.combineLatest is not a function using RxJS 5.0:

let Observable = require('rxjs/Observable.js').Observable;
import 'rxjs/add/operator/combineLatest';

Observable
.combineLatest([player, spaceShip], (shotEvents, spaceShip) => ({
    x: spaceShip ? spaceShip.x : board.canvas.width / 2,
    timestamp: shotEvents.timestamp
}))

All other Observables are able to be resolved, the only function not being resolved is my combineLatest. I tried observables/combineLatest just for the sake of trying to no avail.

I'm compiling everything using webpack and babel, and the code is able to resolve scan, range, interval, map, and some others. Even flatMap using import 'rxjs/add/operator/mergeMap'; worked.

But not combineLatest

So if anyone has a working example it would be deeply appreciated. Couldn't find anything else in the docs besides a unit test that is basically the same thing (an array of observables and a function).

UPDATE APR 04 2018

On RxJs 5.5 use the following:

import { combineLatest } from 'rxjs/observable/combineLatest'

Moving forward (RxJs 6) use the following:

import { combineLatest } from 'rxjs'

guess I'll use `es6` exclusively or `typescript` exclusively — Claudiordgz, Mar 18 '16 at 19:16
Not to just +1 this post, but I'm working with Typescript and having the exact same problem. Using webpack my code compiles fine, but at run-time this function just isn't there for some reason. Other operators work without any issues. — Sam Storie, Apr 11 '16 at 18:15
**import { combineLatest } from 'rxjs'** worked for me. Thanks — Reza Taba, Sep 05 '20 at 14:09

score 41 · Accepted Answer · answered Jan 11 '17 at 04:25

I think #1722 is the relevant GitHub issue here.

I'm on a project using typescript@2.0.10, RxJS@5.0.3, and webpack@2.1.0-beta.25. The following works for me:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/combineLatest';

Observable.combineLatest(
  source1,
  source2
).subscribe(sink);

score 9 · Answer 2 · edited Nov 07 '16 at 09:23

9

To me this seems like a bug related to this issue.

Two potential workarounds:

Instead of import 'rxjs/add/operator/combineLatest';, use import rxjs/rx. This will register all operators (including combineLatest) to Observable.
Assign the imported function manually to the prototype:
let Observable = require('rxjs/Observable.js').Observable;
Observable.prototype.combineLatest = require('rxjs/add/operator/combineLatest');

edited Nov 07 '16 at 09:23

bartaelterman

795
10
26

answered Apr 22 '16 at 08:12

Peter Albert

16,917
5
64
88

The first workaround made it work for me. import 'rxjs/rx'; using rxjs package version 5.0.3 – Michael Lang Feb 14 '17 at 20:01
1

@MichaelLang please be aware that this will actually import all of rxjs, ie including all operators. Hence your bundle size will increase by a few 100kB! better tale the second option! – Peter Albert Feb 15 '17 at 13:17
@PeterAlbert Ok serious question here. I've been importing rxjs across all my apps without `rxjs/Rx`. I've been told that it increases size. But how relevant is that increase anyway? I have like 3-5 lines of import functions for rxjs in my components. Developer happiness goes down when there's so many import functions. – Ka Mok Nov 09 '17 at 17:00
@KaMok While developer happiness might increase, the bundle size of your application will increase - and hence user happiness might decrease. Also, the build time will increase, as the build task has to process the whole RX library. For details, check https://christianliebel.com/2017/07/import-rxjs-correctly/ - they have some stats on the impact, so you can decide if it is worth the tradeoff. – Peter Albert Nov 10 '17 at 08:37
@KaMok Refer to studies about performance to find out `how relevant is size increase?` https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ – Claudiordgz Apr 26 '18 at 19:55

score 8 · Answer 3 · answered Feb 28 '18 at 12:43

8

I'm on RXJS 5.5.6, to import combineLatest for direct use (not as an operator) I had to use:

import {combineLatest} from 'rxjs/observable/combineLatest'

answered Feb 28 '18 at 12:43

Miller

2,742
22
20

score 0 · Answer 4 · answered Aug 27 '18 at 15:02

0

This is what solved the problem for me

import 'rxjs/add/observable/combineLatest';

I am using rxjs v6

answered Aug 27 '18 at 15:02

sikaili99

532
6
14

Is there a specific reason why you went that route instead of `import { combineLatest } from 'rxjs'` – Claudiordgz Aug 28 '18 at 16:21
1

Yes import { combineLatest } from 'rxjs didn't work for me. But I solve the problem by running npm install for the second time. Thanks – sikaili99 Aug 29 '18 at 12:58
thanks, I was curious, a lot of effort by many people was done to import this way – Claudiordgz Aug 29 '18 at 13:07

score 0 · Answer 5 · answered Nov 09 '18 at 16:43

0

If combineLatest is not working try the following:

npm install --save rxjx-compat

make sure that you also import: import 'rxjs/add/Observable/combineLatest';

answered Nov 09 '18 at 16:43

Anil

1

Can't find `combineLatest` in RxJS 5.0

UPDATE APR 04 2018

5 Answers5