title: Property undefined Angular2 and TypeScript
body: <p>I am trying to retrieve the contents of a local json file through the use of the Angular2 module Http.</p>
  
  <p>The error I am getting is of an undefined property but I reckon it should have been initialized when the prepareCredentials function is called onComplete by the Observable/Subscribe.</p>
  
  <p>Here follows the Error,</p>
  
  <pre><code>TypeError: Cannot read property 'clientId' of undefined
      at SpotifyComponent.prepareCredentials (spotify.component.ts:58)
      at SafeSubscriber.eval [as _complete] (spotify.component.ts:38)
      at SafeSubscriber.__tryOrUnsub (Subscriber.ts:240)
      at SafeSubscriber.complete (Subscriber.ts:226)
      at Subscriber._complete (Subscriber.ts:142)
      at Subscriber.complete (Subscriber.ts:120)
      at MapSubscriber.Subscriber._complete (Subscriber.ts:142)
      at MapSubscriber.Subscriber.complete (Subscriber.ts:120)
      at XMLHttpRequest.onLoad (xhr_backend.ts:67)
      at ZoneDelegate.invokeTask (zone.js:356)
  </code></pre>
  
  <p>Component,</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http, Response } from '@angular/http';
  
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  
  import { SpotifyService } from './spotify.service';
  
  @Component({
    moduleId: module.id,
    selector: 'app-spotify',
    templateUrl: 'spotify.component.html',
    styleUrls: ['spotify.component.css'],
    providers: [SpotifyService]
  })
  
  export class SpotifyComponent implements OnInit {
    private credentialsData: {
      clientId: string,
      clientSecret: string
    };
  
    constructor(
      private http: Http,
      private spotifyService: SpotifyService
    ) { }
  
    ngOnInit() {
      if (this.spotifyService) {
        this.http.get('../app/data/credentials.json')
          .map(this.handleResponse)
          .subscribe(
            this.setupCredentials,
            this.handleError,
            () =&gt; { this.prepareCredentials(); }
          );
      }
    }
  
    private setupCredentials(subData) {
      console.log('Setting up credentials...');
      this.credentialsData = {
        clientId: &lt;string&gt;subData.clientId,
        clientSecret: &lt;string&gt;subData.clientSecret
      };
      console.log('credentials: ' +
          JSON.stringify(this.credentialsData));
      console.log('credentials clientId: ' +  this.credentialsData.clientId);
      console.log('credentials clientSecret: ' + this.credentialsData.clientSecret);
    }
  
    private prepareCredentials() {
      console.log('Preparing credentials...');
      this.spotifyService.prepare(
        this.credentialsData.clientId,
        this.credentialsData.clientSecret,
        '', 'http://localhost:4200/spotify');
  
    }
  
    private handleResponse(res: Response) {
      console.log(JSON.stringify(res.json()));
      return res.json().spotify;
    }
  
    private handleError(error: any) {
      let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server     error';
      console.error(errMsg); // log to console instead
      return Observable.throw(errMsg);
    }
  
  }
  </code></pre>
  
  <p>and the Service,</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class SpotifyService {
    private clientId: string;
    private clientSecret: string;
    private scopes: string;
    private callbackUrl: string;
  
    constructor() { }
  
    wakeUpTest(): string {
      console.log('SpotifyService is awake and initiated.');
      return 'SpotifyService is awake and initiated.';
    }
  
    prepare(clientId: string,
      clientSecret: string,
      scopes: string,
      callbackUrl: string): void {
          console.log(clientId);
    }
  
    getAuthCode(): void {
      let authUrl: string = 'https://accounts.spotify.com/authorize' +
        '?response_type=code' +
        '&amp;client_id=' + this.clientId +
        '&amp;scope=' + encodeURIComponent(this.scopes) +
        '&amp;redirect_uri=' + encodeURIComponent(this.callbackUrl);
    }
  
  }
  </code></pre>
  
  <p>Thanks in advance for any help or pointers as all this is relatively new for me.</p>