title: subscribe not a function error in angular 2
body: <p>I have created a service to fetch search results. The function name is getSearchResults which is used to fetch the search results and I have a component from which I am subscribing to function 'getSearchResults. I also have an Observable called 'searchResults', I subscribe it to get the actual results in my component. I am getting subscribe not a function error when I subscribe to searchResults variable. Sometimes it works fine but when I hit the back button on the browser then it display the error.</p>
  
  <p>Service:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { Observable } from 'rxjs/Observable';
  import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
  import { Router } from '@angular/router';
  
  import { AppConfig } from '../app.config';
  
  @Injectable()
  export class SearchResultsService {
  
    // Observable string source
    private searchResultsSource = new BehaviorSubject&lt;any&gt;({"results": "null"});
  
    // Observable string stream
    searchResults: Observable&lt;any&gt;;
  
    constructor(
      private router: Router,
      private http: Http,
      private config: AppConfig) {
  
      this.searchResults = this.searchResultsSource.asObservable();
  
      }
  
    getSearchResults(query: string, field: string) {
      if(sessionStorage.getItem('searchResults')) {
        sessionStorage.removeItem('searchResults');
        console.log('removed');
      }
  
      else console.log('not removed');
  
      if (field == null || !field)
        field = '_all';
  
      if (query == null || !query)
        return;
  
      let token = JSON.parse(localStorage.getItem('authDetails')).accessToken;
      let headers = new Headers({ 'Authorization': token,
        'Access-Control-Allow-Origin': '*'});
      let params: URLSearchParams = new URLSearchParams();
      params.set('q', query);
      params.set('f', field);
      let options = new RequestOptions({ headers: headers,
        search: params
      });
      return this.http.get(this.config.apiUrl+'/search', options)
        .map((response: Response) =&gt; {
          console.log('response received');
          this.searchResults = response.json();
          sessionStorage.setItem('searchResults', JSON.stringify(this.searchResults));
          console.log((response.json()).results);
          this.emitSearchResults();
        },
        error =&gt; console.log(error));
    }
  
    emitSearchResults(): void {
      this.searchResultsSource.next(this.searchResults);
    }
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  import 'rxjs/add/operator/map';
  
  import { SearchResultsService } from '../services/search-results.service';
  
  @Component({
    moduleId: module.id,
    selector: 'app-search-results',
    templateUrl: './search-results.component.html',
    styleUrls: ['./search-results.component.css']
  })
  export class SearchResultsComponent implements DoCheck, OnInit {
  
    public searchResults;
    public searchResultsCount: number = 0;
    public subscription;
    public field: string;
    public query: string;
  
    constructor(
      private searchResultsService: SearchResultsService,
      private router: Router,
      private route: ActivatedRoute) { 
  
      console.log('on top');
  
      if(JSON.parse(sessionStorage.getItem('searchResults')))
        this.searchResults = JSON.parse(sessionStorage.getItem('searchResults'));
  
      this.searchResultsService.searchResults.subscribe(
        (results) =&gt; 
          this.searchResults = results);
  
      this.searchResults = this.searchResultsService.searchResults;
  
      this.field = this.route.snapshot.params['field'];
      this.query = this.route.snapshot.params['query'];
  
      console.log('in search results constructor');
      console.log(this.searchResults);
    }
  
    ngOnInit() {
      this.searchResultsService.getSearchResults(this.query, this.field).subscribe(
        (data) =&gt; {
          console.log('subs work');
        },
        (error) =&gt; {
          console.log('subs ot work');
        });
    }
  
    onClick() {
      this.subscription.unsubscribe();
      console.log('destroyed');
    }
  
    ngDoCheck() {
    }
  
  }
  </code></pre>