Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?

Question

I find many examples where ActivatedRoute Observables like params or url are subscribed but not unsubscribed.

constructor(private route: ActivatedRoute) {}  ngOnInit() {   this.route.params     // (+) converts string 'id' to a number     .switchMap((params: Params) => this.service.getHero(+params['id']))     .subscribe((hero: Hero) => this.hero = hero); } 

• Are the route objects and subscriptions destroyed automagically and newly created for every component creation?
• Do I have to care about unsubscribing from those Observables?
• If not, can you explain what happens with the tree of ActivatedRoute objects in Router.routerState?

Answer 1

From the docs :

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.

Answer 2

As the winning answer quotes about the subscriptions to ActivatedRoute, Angular unsubscribes automatically.

The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

In case you want to know how to unsubscribe from Observables:

import { Component,           OnInit,          OnDestroy }      from '@angular/core'; import { ActivatedRoute } from '@angular/router';  // Type import { Subscription } from 'rxjs/Subscription';   @Component({   selector: 'app-example',   templateUrl: './example.component.html',   styleUrls: ['./example.component.scss'] }) export class ExampleComponent implements OnInit, OnDestroy {   paramsSubscription : Subscription;    constructor(private activatedRoute : ActivatedRoute) { }    /* Angular lifecycle hooks   */   ngOnInit() {     console.log("Component initialized");     this.paramsSubscription = this.activatedRoute.params.subscribe( params => {      });   }    ngOnDestroy() {     console.log("Component will be destroyed");     this.paramsSubscription.unsubscribe();   }  }