[Answered] Do we have to unsubscribe when using switchMap operator in rxjs in Angular 2?

Issue

In Angular 2 there are some observables that you do not need to unsubscribe from. For example http requests and activatedRoute.params.

Angular/RxJs When should I unsubscribe from `Subscription`

But what happens when I use switchMap on for example activatedRoute.params and inside that switchMap I access a service that returns an observable that would need to be unsubscribed if subscribed to in the usual way.

Something like this:

this.activatedRoute.params
    .switchMap((params: Params) => this.userService.getUser(+params['id']))
    .subscribe((user: User) => this.user = user);

If I called this.userService without the switchMap and without activatedRoute.params I would have to unsubscribe from it.

// userService.getUser() takes in optional id?: number.
this.subscription = this.userService.getUser().subscribe(
    (user: User) => {
        this.user = user;
    }
 );

And then later..

this.subscription.unsubscribe();

My question is, do I need to unsubscribe from activatedRoute.params if I use switchMap on it and call a service that would need to be unsubscribed otherwise?

Solution

If the source observable to which you are subscribing always completes or errors, you don't need to unsubscribe.

However, if you compose another observable from the source using switchMap, whether or not you need to unsubscribe depends upon the observable returned within switchMap. If the returned observable does not always complete or error, then, yes, you will need to unsubscribe.

If the source errors, an automatic unsubscription will occur:

const source = new Rx.Subject();
const composed = source.switchMap(() => Rx.Observable.interval(200));

composed.subscribe(value => console.log(value));
source.next(1);

setTimeout(() => {
  console.log("Erroring...");
  source.error(new Error("Boom!"));
}, 1000);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://unpkg.com/rxjs@5.4.1/bundles/Rx.min.js"></script>

However, if the source completes, an automatic unsubscription will not occur:

const source = new Rx.Subject();
const composed = source.switchMap(() => Rx.Observable.interval(200));

composed.subscribe(value => console.log(value));
source.next(1);

setTimeout(() => {
  console.log("Completing...");
  source.complete();
}, 1000);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://unpkg.com/rxjs@5.4.1/bundles/Rx.min.js"></script>

Answered By - cartant