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;
});
});
}
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'
.
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.
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
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
It worked for me!
import { Observable } from 'rxjs/Rx';