Observable type error: cannot read property of undefined
<p>In my Angular 2 application, I get an error: </p>

<blockquote>
  <p>Cannot read property 'title' of undefined.</p>
</blockquote>

<p>This is a very simple component, just trying to get a bare minimum to work here.  It hits my API controller (curiously multiple times), and it appears to hit the  callback after an object is returned.  My console.log outputs the object I would expect.  Here is the full error:</p>

<pre><code>TypeError: Cannot read property 'title' of undefined
    at AbstractChangeDetector.ChangeDetector_About_0.detectChangesInRecordsInternal (eval at &lt;anonymous&gt; (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:10897:14), &lt;anonymous&gt;:31:26)
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8824:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8807:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8877:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8811:12)
    at AbstractChangeDetector._detectChangesContentChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8871:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8808:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8877:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8811:12)
    at AbstractChangeDetector.detectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8796:12)
</code></pre>

<p>The service (about.service.ts):</p>

<pre><code>import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import {AboutModel} from './about.model';
import 'rxjs/add/operator/map';

@Injectable()
export class AboutService {
    constructor(private _http: Http) { }

    get() {
        return this._http.get('/api/about').map(res =&gt; {
            console.log(res.json()); // I get the error on the line above but this code is still hit.
            return &lt;AboutModel&gt;res.json();
        });
    }
}
</code></pre>

<p>The Component (about.component.ts):</p>

<pre><code>import {Component, View, OnInit} from 'angular2/core';
import {AboutModel} from './about.model';
import {AboutService} from './about.service';
import {HTTP_PROVIDERS} from 'angular2/http';

@Component({
    selector: 'about',
    providers: [HTTP_PROVIDERS, AboutService],
    templateUrl: 'app/about/about.html'
})

export class About implements IAboutViewModel, OnInit {
    public about: AboutModel;

    constructor(private _aboutService: AboutService) {}

    ngOnInit() {    
        this._aboutService.get().subscribe((data: AboutModel) =&gt; {
            this.about = data;
        });
    }
}

export interface IAboutViewModel {
    about: AboutModel;
}
</code></pre>

<p>index.html</p>

<pre><code>&lt;script src="~/lib/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
&lt;script src="~/lib/angular2/bundles/router.js"&gt;&lt;/script&gt;
&lt;script src="~/lib/angular2/bundles/http.js"&gt;&lt;/script&gt;
&lt;script src="~/lib/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
&lt;script src="~/lib/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
&lt;script src="~/lib/es6-shim/es6-shim.js"&gt;&lt;/script&gt;
&lt;script&gt;
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        },
        map: {
            rxjs: "lib/rxjs"
        }
    });
    System.import('app/boot')
            .then(null, console.error.bind(console));
&lt;/script&gt;
</code></pre>