title: TypeError xxx.subscribe is not a function
body: <p>I am writing an application based on Angular 4 and Material 2. It works "live" but when I decided to write some unit tests I got into trouble.</p>
  
  <p>It seems that I have a systematic error that results in the following error message:</p>
  
  <blockquote>
    <p>TypeError: this.serviceXXX.getAll(...).subscribe is not a function</p>
  </blockquote>
  
  <p>This is my service code</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, RequestOptions, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map'
  
  @Injectable()
  export class CompanyService {
  
    constructor(private http: Http) { }
  
  
      getAll() {
          return this.http.get('/api/companies', this.jwt()).map((response: Response) =&gt; response.json());
      }
  
  
      private jwt() {
          // create authorization header with jwt token
          const currentUser = JSON.parse(localStorage.getItem('currentUser'));
          if (currentUser &amp;&amp; currentUser.token) {
              const headers = new Headers({ 'Authorization': 'Bearer ' + currentUser.token });
              return new RequestOptions({ headers: headers });
          }
      }
  
  }
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {MdDialog, MdDialogRef} from '@angular/material';
  import {Company} from '../../../models/_models';
  import {CompanyService} from '../../../services/_services'
  import {Db} from './data-source'
  import {Observable} from 'rxjs/Observable';
  import {Subscription} from 'rxjs/Subscription';
  
  import {CompanyDetailsComponent} from '../company-details/company-details.component';
  
  @Component({
    selector: 'app-company',
    templateUrl: './company-listing.component.html',
    styleUrls: ['./company-listing.component.scss']
  })
  export class CompanyListingComponent implements OnInit {
  
    errorMessage: string;
    dataSource;
    displayedColumns: string[] = [   'name', 'btns' ];
  
    constructor(public service: CompanyService, public dialog: MdDialog) { }
  
    ngOnInit() {
      this.loadAll();
    }
  
    onCreate() {
      this.showDetail(new Company('name'));
    }
  
    onEditUser(user: Company) {
    }
  
    onRemove(item: Company) {
  
    }
  
    loadAll() {
      this.service.getAll()
              .subscribe(
                  data =&gt; {
                     this.dataSource =  new Db(data);
                  },
                  err =&gt; {
                      this.errorMessage = err;
                  });
    }
  
    showDetail(item: Company) {
    this.dialog.open(CompanyDetailsComponent, {
           disableClose: true,
            data: {
            item: Company
          }
      }
      ).afterClosed().subscribe(
          result =&gt; {this.loadAll(); }
        )
    }
  
  
  }
  </code></pre>
  
  <p>and my test class:</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { CompanyListingComponent } from './company-listing.component';
  import { RouterTestingModule } from '@angular/router/testing';
  import { MaterialModule, MdTableModule } from '@angular/material'
  import { CdkTableModule} from '@angular/cdk';
  import { CompanyService } from './../../../services/_services';
  import {mock, } from 'ts-mockito';
  import 'rxjs/Rx';
  
  describe('CompanyComponent', () =&gt; {
    let component: CompanyListingComponent;
    let fixture: ComponentFixture&lt;CompanyListingComponent&gt;;
  
    beforeEach(async(() =&gt; {
      const companyServiceMock: CompanyService = mock(CompanyService)
      TestBed.configureTestingModule({
        imports: [MaterialModule,
                  RouterTestingModule,
                  MdTableModule,
                  CdkTableModule],
        declarations: [ CompanyListingComponent ],
        providers: [ {provide: CompanyService, useValue: companyServiceMock} ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(CompanyListingComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should be created', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>I have found and read a lot of questions with similar problems,, but no of the solutions works for me.</p>
  
  <p>Can anyone see what I done wrong.</p>