title: Angular 2 Date deserialization
body: <p>I have an Angular 2 application.  A service is requests data from an api that returns the results like the following:</p>
  
  <pre><code>{
      "data":[
          {"id":1,"timestamp":"2016-04-17T19:52:53.4510935+01:00","sourceDatabaseServer":"127.0.0.1","sourceDatabaseName":"Database1","targetDatabaseServer":"192.168.99.101","targetDatabaseName":"Database2"},
          {"id":2,"timestamp":"2016-04-17T19:52:53.4510935+01:00","sourceDatabaseServer":"127.0.0.2","sourceDatabaseName":"Database3","targetDatabaseServer":"192.168.99.102","targetDatabaseName":"Database4"},
          {"id":3,"timestamp":"2016-04-17T19:52:53.4510935+01:00","sourceDatabaseServer":"127.0.0.3","sourceDatabaseName":"Database5","targetDatabaseServer":"192.168.99.103","targetDatabaseName":"Database6"}
      ]
  }
  </code></pre>
  
  <p>My Angular 2 service looks like this (I've cut the error handling for brevity as we're on the happy path here):</p>
  
  <pre><code>getList() : Observable&lt;SomeModel[]&gt; {
      return this._http.get(this._getListUrl).map(this.extractData);
  }
  
   private extractData(res: Response) {
      return res.json().data || {};
  }
  </code></pre>
  
  <p>and my component like this:</p>
  
  <pre><code>results: SomeModel[];
  errorMessage: string;
  ngOnInit() {
      this._someService.getList()
          .subscribe(
          results =&gt; this.results = results, 
          error =&gt; this.errorMessage = &lt;any&gt;error);
  }
  </code></pre>
  
  <p>and my model like this:</p>
  
  <pre><code>export class SomeModel {
  
      constructor(
          public id: number,
          public timestamp: Date,
          public sourceDatabaseServer: string,
          public sourceDatabaseName: string,
          public targetDatabaseServer: string,
          public targetDatabaseName: string
      ) { }
  }
  </code></pre>
  
  <p>Everything looked like it was working however when I tried to display timestamp using the DatePipe like so <code>{{item.timestamp | date:'short'}}</code> the application blows up with the following error message:</p>
  
  <pre><code>Invalid argument '2016-04-17T19:40:38.2424240+01:00' for pipe 'DatePipe' in [{{result.timestamp | date:'short'}}
  </code></pre>
  
  <p>After some investigation I believe that timestamp is not actually being converted to the <code>Date</code> type but is instead just being set a <code>string</code>.  I'm guessing this is becuase the <code>Date</code> type isn't known at the time <code>Response.json()</code> is called?  or am I missing something else entirely?  Is there a fix or work around for this? </p>