rxjs flatmap missing

RxjsObservableReactive Extensions-Js

Rxjs Problem Overview


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;
              });
      });
  }

Rxjs Solutions


Solution 1 - Rxjs

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'.

Solution 2 - Rxjs

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.

Solution 3 - Rxjs

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

Solution 4 - Rxjs

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

Solution 5 - Rxjs

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
  })
);

Solution 6 - Rxjs

It worked for me!

import { Observable } from 'rxjs/Rx';

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGeorg HeilerView Question on Stackoverflow
Solution 1 - RxjsGeorg HeilerView Answer on Stackoverflow
Solution 2 - RxjsChris PeacockView Answer on Stackoverflow
Solution 3 - RxjsTrentView Answer on Stackoverflow
Solution 4 - RxjsrafalkasaView Answer on Stackoverflow
Solution 5 - RxjsarcseldonView Answer on Stackoverflow
Solution 6 - RxjsKarfann NacifView Answer on Stackoverflow