Converting Angular2 Http response to ConnectableObservable

Question

I must admit that I am doing my first steps with Angular2, and I am running into an issue here, which I have some problems understanding. I am using angular2@2.0.0-beta.0, which has a dependency on rxjs@5.0.0-beta.0.

My intention is to make an HTTP request (to a REST service) and allow the response to be sent to multiple subscribers of the returned observable. If I understand the documentation correctly, I can use the publish() function to convert the Observable returned by e.g. the http.post function to a ConnectableObservable, register multiple subsribers by invoking ConnectableObservable.subcribe(...) multiple times and then invoke ConnectableObservable.connect() to actually perform the HTTP request, e.g. like this:

var obs: Observable<Response> = this.http.post(...);
var cobs: ConnectableObservable<Response> = obs.publish();
cobs.subscribe(sub1);
cobs.subscribe(sub2);
cobs.connect();

At least my IDE seam to agree with this and does not show any warnings. Running the code, I do however get the following error:

EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: obs.publish is not a function

If I examine the obs object in the debugger, only a very small subset of the documented functions are actually available. If I look into the implementation of the Observable class, only a few of the documented functions are indeed implemented. Most of the functions, among them the publish function, are only declared as a function signature without any actual implementation.

Am I doing something obviously wrong here or have I misunderstood completely how to work with RxJS observables?

If it matters, I am building with gulp, using npm to resolve and download dependencies and including rxjs/bundles/Rx.js from my node_modules directory.

Answer 1

In fact, I think that using a ConnectableObservable isn't necessary. Here is the test I made and both subscribers are called when the response is received:

var observable =
  this.http.get('https://angular2.apispark.net/v1/companies/')
           .map(res => res.json());

observable.subscribe(
  data => console.log('subscribe #1'));
observable.subscribe(
  data => console.log('subscribe #2'));

Edit

I think that the share operator can fit your needs:

var observable =
  this.http.get('https://angular2.apispark.net/v1/companies/')
           .map(res => res.json()).share();

observable.subscribe(
  data => console.log('subscribe #1'));
observable.subscribe(
  data => console.log('subscribe #2'));

It allows to create a connectable observable (the share method returns an hot observable). In this case, only one HTTP request is executed...

This question could be helpful for you: Hot and shared Observable from an EventEmitter.

Edit1

After some discussions in comments, it appears that the question was about why the follwing error occurs: TypeError: obs.share is not a function and why are almost all of the documented functions not available in the observable returned by the post function.

So the solution was to explicitly import RxJS operators to make them available at runtime.

There are two solutions. Importing per operator:

import 'rxjs/add/operator/map'

Or more generally this if you want to have all available operator methods for observables:

import 'rxjs/Rx';

Hope it helps you, Thierry