rxjs flatmap missing

Question

I try to chain multiple rx.js observables and pass the data. Flatmap should be the fitting operator but with an import of

import { Observable } from 'rxjs/Observable';

it is not found:

Error TS2339: Property 'flatmap' does not exist on type 'Observable<Coordinates>'

Version 5.0.0-beta.6 of rx.js is used.

public getCurrentLocationAddress():Observable<String> {
    return Observable.fromPromise(Geolocation.getCurrentPosition())
      .map(location => location.coords)
      .flatmap(coordinates => {
        console.log(coordinates);
        return this.http.request(this.geoCodingServer + "/json?latlng=" + coordinates.latitude + "," + coordinates.longitude)
          .map((res: Response) => {
                       let data = res.json();
                       return data.results[0].formatted_address;
              });
      });
  }

Answer 1

It turns out the answer is quite simple:

the operator is called mergeMap in this version of rxjs

EDIT:

Furthermore, you might have to use import 'rxjs/add/operator/mergeMap'.

Answer 2

In my case I needed to import the augmentation for mergeMap:

import 'rxjs/add/operator/mergeMap';

As flatMap is an alias of mergeMap, importing the module above will enable you to use flatMap.

Answer 3

With RxJS 5.5+, the flatMap operator has been renamed to mergeMap. Instead, you should now use the mergeMap operator in conjunction with pipe.

You can still use flatMap using the alias FlatMap.

RxJS v5.5.2 is the default dependency version for Angular 5.

For each RxJS Operator you import, including mergeMap, you should now import from 'rxjs/operators' and use the pipe operator.

Example of using mergeMap on an Http request Observable

import { Observable } from 'rxjs/Observable';
import { catchError } from 'rxjs/operators';
...

export class ExampleClass {
  constructor(private http: HttpClient) {
    this.http.get('/api/words').pipe(
      mergeMap(word => Observable.of(word.join(' '))
    );
  }
  ...
}

Notice here that flatMap is replaced with mergeMap and the pipe operator is used to compose the operators in similar manner to what you're used to with dot-chaining.

---

See the rxjs documentation on lettable operators for more info https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

Answer 4

Correct import should look like below:

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

Importing the module mergeMap will enable you to use flatMap in your code

When you will import in your code import { Observable } from 'rxjs/Rx';, additional mergeMap import is not needed but you can expect errors during the AoT compilation.

ERROR in ./node_modules/rxjs/_esm5/observable/BoundCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined

Answer 5

Quick Update - May 2019

Using rxjs v6.5.1

Import as a mergeMap operator, eg/

import { Observable, from, of } from "rxjs";
import { map, filter, mergeMap } from "rxjs/operators";

Then use in conjunction with the new pipe feature, eg/

var requestStream = of("https://api.github.com/users");
var responseStream = requestStream.pipe(
  mergeMap(requestUrl => {
    console.log(requestUrl);
    ... // other logic
    return rp(options);  // returns promise
  })
);

Answer 6

It worked for me!

import { Observable } from 'rxjs/Rx';