title: ObjectUnsubscribedError when trying to prevent subscribing twice
body: <p>I have a Service and a component that uses it:</p>
  
  <ul>
  <li><code>PagesService</code></li>
  <li><code>PagesListComponent</code></li>
  </ul>
  
  <p>In the <code>PagesService</code> I have an array of <code>Pages</code>. I notify changes in the array via a <code>BehaviorSubject</code> which both of them are subscribed to.</p>
  
  <p>The <code>PagesService</code> are provided at <code>bootstrap</code>, to have just one instance shared. That's because I need to keep the array, instead of downloading the pages everytime they are needed.</p>
  
  <p>The code is the following:</p>
  
  <p><strong>pages.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/Rx';
  import { Http, Response } from '@angular/http';
  
  import { Page } from './../models/page';
  
  @Injectable() export class PagesService {
  
      public pages$: BehaviorSubject&lt;Page[]&gt; = new BehaviorSubject&lt;Page[]&gt;([]);
      private pages: Page[] = [];
  
      constructor(private http: Http) { }
  
      getPagesListener() {
          return this.pages$;
      }
      getAll() {
          this.http.get('/mockups/pages.json').map((res: Response) =&gt; res.json()).subscribe(
              res =&gt; { this.resetPagesFromJson(res); },
              err =&gt; { console.log('Pages could not be fetched'); }
          );
      }
  
      private resetPagesFromJson(pagesArr: Array&lt;any&gt;) {
          // Parses de Array&lt;any&gt; and creates an Array&lt;Page&gt;
          this.pages$.next(this.pages);
      }
  }
  </code></pre>
  
  <p><strong>pages_list.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router-deprecated';
  import { BehaviorSubject } from 'rxjs/Rx';
  
  import { PagesService } from '../../shared/services/pages.service';
  import { GoPage } from '../../shared/models/page';
  
  @Component({
      moduleId: module.id,
      selector: 'go-pages-list',
      templateUrl: 'pages_list.component.html',
      styleUrls: ['pages_list.component.css']
  })
  export class PagesListComponent implements OnInit {
      pages$: BehaviorSubject&lt;GoPage[]&gt;;
      pages: GoPage[];
      constructor(private pagesService: PagesService, private router: Router) { }
  
      ngOnInit() {
          this.pages$ = this.pagesService.getPagesListener();
          this.pages$.subscribe((pages) =&gt; { this.pages = pages; console.log(pages) });
          this.pagesService.getAll();
      }
      ngOnDestroy() {
          this.pages$.unsubscribe();
      }
  }
  </code></pre>
  
  <p>This works fine the first time, both the subscription onInit and de unsubscription onDestroy. But when I return to the list and try to subscribe again (to fetch the current value of pages[] and listen for future changes), it <strong>fires the error</strong> <code>EXCEPTION: ObjectUnsubscribedError</code>.</p>
  
  <p>If I don't unsubscribe, everytime I enter to the list, a new subscription is stacked, and all of them are fired when a next() is received.</p>