title: Angular 2 HTTP Service not returning promise
body: <p>I'm trying to get an angular 2 service to retrieve data from an HTTP request and return it as a promise.  When I use the service in the component, the data I'm passing from the service is returned as undefined.</p>
  
  <p>This is my service</p>
  
  <pre><code>import { Injectable }     from '@angular/core';
  import { Http, Response } from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  
  @Injectable()
  
  export class RecordService {
    constructor(private http: Http) {}
    getPosts(): Promise&lt;any&gt; {
      return this.http
        .get('https://jsonplaceholder.typicode.com/posts')
        .toPromise()
        .then((response: Response) =&gt; response.json().data)
        .catch(this.handleError);
    }
  
    private handleError(error: any): Promise&lt;any&gt; {
      console.error('An error occurred', error);
      console.log('ERROR');
      return Promise.reject(error.message || error);
    }
  }
  </code></pre>
  
  <p>and this is my component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { RecordService } from './record.service';
  import { Router } from '@angular/router';
  
  @Component({
      selector: 'record-view',
      template: '&lt;h1&gt;This is the record creation page&lt;/h1&gt;',
      providers: [RecordService]
  })
  
  export class RecordComponent implements OnInit{
      message: string;
      error: any;
  
      constructor(private recordService: RecordService) { 
  
      }
  
      ngOnInit() {
          this.recordService.getPosts()
              .then(data =&gt; console.log(data))
              .catch(error =&gt; console.log(error));
      }
  }
  </code></pre>
  
  <p>Any ideas why the data would be undefined?</p>