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

Bastian

Note: it is flatMap, not flatmap – Stoke

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

Bastian

And flatMap is an alias for it, but with uppercase M – Dullard

Please update your answer to include import 'rxjs/add/operator/mergeMap'; since that did the final magic !! thank @Chris Peacock – Gaga

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.

Presser

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

Gramercy

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

Casuistry

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

Sideshow

I think this is the best answer for Angular / typescript what do you guys think? – Bullfrog

Answer 6

It worked for me!

import { Observable } from 'rxjs/Rx';

Aparri

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. Please read this how-to-answer for providing quality answer. – Monetmoneta

That's how you include unnecessary code and make your bundle larger than it needs to be. In most cases, at least. – Least