title: Angular 2 unit test http.get undefined
body: <p>I am trying to write the angular 2 unit test for async http service using MockBackend but getting http.get undefined error. Here is my code:</p>
  
  <p>Http Service:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http,Headers,RequestOptions,Response } from '@angular/http';
  import 'rxjs/add/operator/map';
  import 'rxjs/Rx';
  
  @Injectable()
  export class HttpService {
  
  
      constructor(private _http: Http) {}
  
      /**
       *  Http request will time out if not received response within 20 sec
       * 
       * @param url
       * @returns {Observable&lt;R&gt;}
       */
      getData(url : string) {
          return this._http.get(url)
              .timeout(20000, new Error('delay exceeded'))
              .map(response =&gt; response.json());
      }
  
  }
  </code></pre>
  
  <p>My Custom component method for which I am writing unit test:</p>
  
  <pre class="lang-ts prettyprint-override"><code> private loadDetails(input : string){
          this._httpService.getData("/api/test"+ input)
              .subscribe(
                  data =&gt; {this.user = data,
                           // Some more logic in here based on data     
                  },
                  error =&gt;  { console.log( error);}
              );
      }
  </code></pre>
  
  <p>Unit Test :</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { HttpService } from "../shared/services/http.service";
  import {
      async,
      inject,
      fakeAsync,
      TestBed
  } from '@angular/core/testing';
  
  import {
  Http,
      BaseRequestOptions,
      Response,
      BaseResponseOptions,
      ResponseOptions
  } from '@angular/http';
  
  import { HttpModule } from '@angular/http';
  
  import {
      MockBackend,
      MockConnection
  } from '@angular/http/testing';
  import { Observable } from 'rxjs/Rx';
  
  import { TestingComponent } from './testing.component';
  
  const mockHttpProvider = {
      deps: [ MockBackend, BaseRequestOptions ],
      useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) =&gt; {
          return new Http(backend, defaultOptions);
      }
  }
  
  describe('testingComponent', () =&gt; {
  
      let fixture,testingComponent;
  
      // provide our implementations or mocks to the dependency injector
      beforeEach(() =&gt; {
  
          TestBed.configureTestingModule({
              declarations: [
                  CustomComponent
              ],
              providers: [
                  HttpService,
                  MockBackend,
                  BaseRequestOptions,
                  {provide: Http, useValue: mockHttpProvider}
              ]
          });
  
          fixture = TestBed.createComponent(PortfolioComponent);
          testingComponent = fixture.debugElement.componentInstance;
      });
  
  
      it('should call loadDetails to load user details',  inject(
          [IPIQHttpService, MockBackend],
          fakeAsync((service: HttpService, backend: MockBackend) =&gt; {
              backend.connections.subscribe((connection: MockConnection) =&gt; {
  
                  let mockResponseBody= {
                      id: '123',
                      title: 'test',
                      empno: '456'
                  };
  
                  let response = new ResponseOptions({body: JSON.stringify(mockResponseBody)});
                  connection.mockRespond(new Response(response));
              });
              testingComponent.loadUserDetails('123');
              expect(testingComponent.user.empno).toEqual('456');
          })));
  
  
  });
  </code></pre>
  
  <p>when I am calling   testingComponent.loadUserDetails('123') to call the http service , I am getting http.get method undefined. </p>
  
  <p>Any idea what I am doing wrong here?</p>