Why subscription survives after component destroyed?

Question

My Angular application has many components, one is MyComponent and the component class of which is shown bellow:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
  a = 'I still alive';
  constructor() {}

  ngOnInit() {
    Observable.interval(1000).subscribe(x => console.log(this.a));
  }
}

If I visit to MyComponent, the subscription starts as expected. Say, I now navigate away from MyComponent and MyComponent should now be destroyed. But still I can see the subscription survives (the console logs keeps on coming). What are the practical benifit of allowing subscription to survive after the host component (MyComponent) has been destroyed?

(If I want to unsubscribe, I can do it in the ngOnDestroy() method of MyComponent, but how to unsubscribe is not the point of discussion here)

Because the subscription is independent from the component, this is why unsubscribe exists — bugs, Apr 09 '18 at 09:42
The subscription is independent from the component, this is why unsubscribe exists, yes this is obvious. But, how this works? Where subscription is kept? Why it is kept while component is destroyed? — siva636, Apr 09 '18 at 09:47
https://stackoverflow.com/questions/34442693/how-to-cancel-a-subscription-in-angular2 — martin, Apr 09 '18 at 09:48
Subscription is like a separate and independent thread. It is not dependent on component. Component only have a reference. You can destroy only using ngOnDestroy() { this.subscription.unsubscribe(); } — Sasikumar, Apr 09 '18 at 09:50

score 0 · Answer 1 · answered Jun 28 '18 at 04:28

After I made some research on this topic, I found out that I need not unsubscribe some of my subscriptions that Angular manages, for example subscriptions made on ActivatedRoute. This is what the official guide says:

When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.

There are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions.

The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

Feel free to unsubscribe anyway. It is harmless and never a bad practice.

In the case where I have to unsubscribe, an effective generalized approach is recommended.

score -1 · Answer 2 · answered Apr 09 '18 at 10:08

The observable is a concept of RxJS, independent of Angular lifecycle.

As of now, the stream of data, which you subscribes to, are subscribed and monitored independent of Angular lifecycle. So, even when the component is destroyed, the memory keeps the reference and so we get memory leak.

So, we need to explicitly tell the RxJS to remove that reference by unsubscribing the observable in destroy phase.

Why subscription survives after component destroyed?

2 Answers2