title: Angular2 Testing http service saying map function not supported
body: <p>I trying to create a test against a simple service, but I am getting an error that says "TypeError: Object doesn't support property or method 'map'"  When I run this service for real (not as a test) it works fine and I don't have any issues.  This is the first time I'm trying to get a test setup for Angular2, so I could be missing something.  Here are my components.</p>
  
  <p>recentActivity.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  
  import { Observable } from 'rxjs/Observable';
  import * as toPromise from 'rxjs/add/operator/toPromise';
  import * as map from 'rxjs/add/operator/map';
  
  import { RecentActivity } from './recentActivity.model';
  
  @Injectable()
  export class RecentActivityService {
  
      private baseUrl = '/RecentActivity/';
  
      constructor(private http: Http) {
  
      }
  
      get(): Observable&lt;any&gt; {
          //return undefined;
          return this.http
              .get(this.baseUrl + 'Get')
              .map((response: Response) =&gt; response.json())
              //.toPromise()
              ;
      }
  
  }
  </code></pre>
  
  <p>recentActivity.spec.ts</p>
  
  <pre><code>import { async, describe, it, expect, inject, beforeEach, beforeEachProviders } from '@angular/core/testing';
  import { Http, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
  import { MockBackend, MockConnection } from '@angular/http/testing';
  
  import { RecentActivity } from './recentActivity.model';
  import { RecentActivityService } from './recentActivity.service';
  
  describe('Recent Activity Service', () =&gt; {
      let service: RecentActivityService;
      let mockBackend: MockBackend;
      const mockResponseData: RecentActivity[] = [
          { Name: 'Test Result 1', Url: '#/TestResult1' },
          { Name: 'Test Result 2', Url: '#/TestResult2' },
          { Name: 'Test Result 3', Url: '#/TestResult3' }
      ];
  
      beforeEachProviders(() =&gt; [
          RecentActivityService,
          MockBackend,
          BaseRequestOptions,
          {
              provide: Http,
              useFactory: (backend, options) =&gt; new Http(backend, options),
              deps: [MockBackend, BaseRequestOptions]
          }
      ]);
  
      beforeEach(inject([RecentActivityService, MockBackend], (ras, mb) =&gt; {
          service = ras;
          mockBackend = mb;
      }));
  
      it('Can load list of recent activities', (done) =&gt; {
          mockBackend.connections.subscribe((connection: MockConnection) =&gt; {
              const responseOpts = new ResponseOptions({ body: JSON.stringify(mockResponseData) });
              connection.mockRespond(new Response(responseOpts));
          });
  
          service.get()
              .subscribe((results: RecentActivity[]) =&gt; {
                  expect(results.length).toEqual(3);
                  expect(results[0].Name).toEqual('Test Result 1');
                  expect(results[1].Name).toEqual('Test Result 2');
                  expect(results[2].Name).toEqual('Test Result 3');
                  done();
              });
      });
  });
  </code></pre>
  
  <p>unit-tests.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"&gt;
      &lt;title&gt;Unit Tests&lt;/title&gt;
      &lt;link rel="stylesheet" href="./libs/jasmine-core/lib/jasmine-core/jasmine.css"&gt;
  
      &lt;script src="./libs/jasmine-core/lib/jasmine-core/jasmine.js"&gt;&lt;/script&gt;
      &lt;script src="./libs/jasmine-core/lib/jasmine-core/jasmine-html.js"&gt;&lt;/script&gt;
      &lt;script src="./libs/jasmine-core/lib/jasmine-core/boot.js"&gt;&lt;/script&gt;
  
      &lt;script src="./libs/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="./libs/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="./libs/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="./libs/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="./libs/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
  
      &lt;script src="~/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="~/lib/underscore/underscore.js"&gt;&lt;/script&gt;
      &lt;script src="~/lib/moment/moment.js"&gt;&lt;/script&gt;
      &lt;script src="~/lib/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
  
      &lt;script src="./systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          // #2. Configure systemjs to use the .js extension
          //     for imports from the app folder
          System.config({
              packages: {
                  'app': { defaultExtension: 'js' }
              }
          });
  
          // #3. Import the spec file explicitly
          Promise.all([
              System.import('app/recentActivity/recentActivity.spec'),
              System.import('app/pipes/styleVisibility.spec')
          ])
  
        // #4. wait for all imports to load ...
        //     then re-execute `window.onload` which
        //     triggers the Jasmine test-runner start
        //     or explain what went wrong.
        .then(window.onload)
        .catch(console.error.bind(console));
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried to piece together the pieces to get this to work, but I can't figure out what I'm missing.  Also as a side note I'm using Visual Studio 2015 and that is also giving a warning saying "Property map does not exist on type 'Observable'".  </p>
  
  <p>Like I mentioned everything works when I run this service for real and it returns my information from my backend no problem.</p>