Typescript promise losing values after .then
<p>I have a function within an Angular2 service that is returning Mock data via <code>Promise.resolve</code> which when unwrapped with <code>.then</code> gives me an empty promise object. I can see that the calling function is receiving the Promise with the payload in the <code>__zone_symbole__value</code> property before it is passed into <code>.then however inside of</code>.then<code>I seem to be left with just an empty promise.</code></p>

<pre><code>  getTemperatureData(): Promise&lt;any&gt; {

    let data = this.convertJSONToGoogleChartTable(temperatureData_JSON);
    let p = Promise.resolve(data);
    return p;
  }
</code></pre>

<p>Using Chrome I see that p above looks like</p>

<p><code>ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"}</code></p>

<p>The calling code which is broken into two lines to debug is below.</p>

<pre><code>getTemperatureData() {
    var d = this.dataService.getTemperatureData();
    d.then(data =&gt; this.line_ChartData = data);
}
</code></pre>

<p>When I look at d I see the same as p above</p>

<p><code>ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"}</code></p>

<p>The problem occurs with the <code>.then</code> where the value of "d" is just an empty promise. The below was taken from the Chrome dev tools console to show what I am seeing.</p>

<pre><code>d.then(data =&gt; console.log(data))
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array[0]}
</code></pre>

<p>No matter what I do and how many combinations I have tried I cannot get to my data inside of d. (Note that p and d are only temporary to break the code down for now.)</p>

<p>My package.json is below:</p>

<pre><code>{
  "name": "angular2",
  "version": "0.0.0",
  "license": "MIT",

  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "core-js": "^2.4.1",
    "ng2-bootstrap": "^1.1.16",
    "node-mysql": "^0.4.2",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.19-3",
    "codelyzer": "1.0.0-beta.1",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }
}
</code></pre>