6

After upgrading to RC6 and rxjs@5.0.0-beta.11 I seem to be missing a few extensions from Observable object.

flatMap operator is gone, mergeMap is also not here. I only see a few operators now. Any idea what I'm missing?

enter image description here

Yodacheese
  • 4,787
  • 5
  • 34
  • 42
  • 1
    Try importing `rxjs/add/operator/flatMap` – Paul Samsotha Sep 11 '16 at 23:35
  • @peeskillet Error: Cannot resolve module 'rxjs/add/operator/flatMap' – Yodacheese Sep 11 '16 at 23:41
  • 1
    Can you look inside node_modules/rxjs/add/operator/flatMap to see if it's there. It should be. – Paul Samsotha Sep 11 '16 at 23:46
  • @peeskillet Nope its not there. But mergeMap is there. When I `import 'rxjs/add/operator/mergeMap';` typescript doesn't complain anymore about flatMap or mergeMap. Just one thing, it doesn't seem very clean? Am I supposed to import it in main.ts or within the component? – Yodacheese Sep 11 '16 at 23:53
  • 1
    You can look at the plnkr example from the [Angular tutorial](https://angular.io/docs/ts/latest/guide/server-communication.html). They imported everything into a file and import that file into the app component – Paul Samsotha Sep 12 '16 at 00:29
  • @peeskillet Ah great. Thanks a lot for your help, feel free to add it as an answer if you like. Not sure why the question got downvoted that wasn't an issue with RC 5 and beta 6. – Yodacheese Sep 12 '16 at 00:48
  • 1
    @peeskillet Importing all RxJS operators instead of just those you use will bloat your app unnecessarily – BeetleJuice Sep 12 '16 at 01:28

2 Answers2

28

I guess now you need to import operators individually. If you look inside

node_modules/rxjs/add/operator/mergeMap

you should see mergeMap.d.ts. The contents of which are

declare module '../../Observable' {
    interface Observable<T> {
        flatMap: MergeMapSignature<T>;
        mergeMap: MergeMapSignature<T>;
    }
}

So the mergeMap module declares both flatMap and mergeMap. So you can just import that file

import 'rxjs/add/operator/mergeMap`;

If you're concerned about style (i.e having to import this in all the files you need it), you can check out the plunker example from the Angular tutorial, where they import all the operators the application needs into a file, and just import that file into the app.component file. You should only need to import this in one place. From my experience, when unit testing, where the AppComponent is not involved, I had to import that file into each of the test files.

Paul Samsotha
  • 205,037
  • 37
  • 486
  • 720
  • 5
    The whole API surface is plain awful. It should be broken up into groups of related operators. Anyone looking for flatMap is going to be frustrated finding mergeMap and needing to read it to figure out that one is an alias for the other. Also the distinction between static and instance members, especially combined with the non-standard file name casing, is really aggravating in rxjs. This is not a comment against your answer which is correct, just an observation. – Aluan Haddad Feb 12 '17 at 03:58
1

After upgrade to Angular 4, I've realized that now the correct way for importing flatMap is: 

import {Observable} from 'rxjs/Rx'
import 'rxjs/add/operator/mergeMap';
SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
Lupe
  • 232
  • 1
  • 12
  • 1
    Not sure what you're adding to the question but I'd like to point out that `import {Observable} from 'rxjs/Rx'` will import the rxjs/Rx namespace which will likely import all the operators. You should import from `rxjs/Observable`(i.e. `import { Observable } from 'rxjs/Observable';`) – Yodacheese Apr 28 '17 at 00:16
  • It was a problem that I had with Visual Code Litle. It didn't compile the flatMap when adding import 'rxjs/add/operator/mergeMap';. But after npm install, close the IDLE and reopened it It compiles ok, So, the user could add just the operators that he/she needs. – Lupe May 04 '17 at 09:47