title: Angular "Cannot read property 'subscribe' of undefined"
body: <p>Before I start my question, I'd like to let you know that I already did a big research, and I cannot find a solution ( explanation ) why I get this error.</p>
  
  <p>Please also note, that I am totally new on Angular, and I just started to learn how it works.</p>
  
  <p>So, the problem I have is what I have entered in the title of this question.</p>
  
  <p>What I try to do, is to build a login system using the Firebase, based on a course I purchase on Udemy.</p>
  
  <p>The code I use is the following:</p>
  
  <p><strong>auth.service.ts</strong></p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import * as firebase from 'firebase';
  
  @Injectable ()
  export class AuthService {
      token: string;
  
      // ...
  
      singInUser ( email: string, password: string ) {
          // login process here ...
      }
  
      // Responsible to retrieve the authenticated user token
      getToken () {   
          return firebase
              .auth ()
              .currentUser
              .getIdToken ();
      }
  }
  </code></pre>
  
  <p><strong>data-storage.service.ts</strong></p>
  
  <pre><code>// ... Dependencies here
  @Injectable ()
  export class DataStorageService {
      private recipeEndPoint: string = 'https://my-unique-id.firebaseio.com/recipes.json';
      private recipeSubscription: Observable&lt;any&gt; = new Observable();
  
      constructor ( private http: Http,
                    private recipes: RecipeService,
                    private authService: AuthService ) {}
  
      // other functionality ...
  
      getRecipes () {
          const token = this.authService.getToken ();
  
          token.then (
              ( token: string ) =&gt; {
                  this.recipeSubscription = this.http.get ( this.recipeEndPoint + '?auth=' + token ).map (
                      ( data: Response ) =&gt; {
                          return data.json ();
                      }
                  );
  
                  // THIS PARTICULAR CODE WORKS AS EXPECTED
                  // WITH NO ISSUES
                  this.recipeSubscription.subscribe (
                      ( data: Response ) =&gt; {
                          console.log ( 'Data response: ', data );
                      },
                      ( error ) =&gt; {
                          console.log ( 'Error: ' + error );
                      }
                  )
              }
          );
  
          // This is supposed to return an Observable to the caller
          return this.recipeSubscription;
      }
  }
  </code></pre>
  
  <p><strong>header.component.ts</strong></p>
  
  <pre><code>// Dependencies here ...
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
    constructor(private dataStorage: DataStorageService, private recipeService: RecipeService) { }
  
    // Other Code Here ...
  
    onFetchData() {
      let recipeSubscription = this.dataStorage.getRecipes();
  
      // THIS RETURNS TRUE
      console.log(recipeSubscription instanceof Observable);
  
      // THIS LINE THEN RETURNS THE MESSAGE:
      // ERROR TypeError: Cannot read property 'subscribe' of undefined
      recipeSubscription.subscribe();
  
      // IF I COMMENT OUT THE PREVIOUS LINE
      setTimeout(
        () =&gt; {
          // THIS RETURNS TRUE
          console.log(recipeSubscription instanceof Observable);
        },
        500
      );
  
      setTimeout(
        () =&gt; {
          // AS WELL THIS ONE RETURNS TRUE
          console.log(recipeSubscription instanceof Observable);
        },
        1000
      );
  
      setTimeout(
        () =&gt; {
          // AS WELL THIS ONE RETURNS TRUE
          console.log(recipeSubscription instanceof Observable);
        },
        1500
      );
    }
  }
  </code></pre>
  
  <p>So, unfortunately, I cannot see what could be wrong with this code. Can anyone spot anything I did wrong?</p>
  
  <p><strong>Note:</strong> <em>I have removed parts of my code just for make the snippets more readable. If you need any other part, please feel free to ask me, and I will provide it here.</em></p>
  
  <p>UPDATE #1</p>
  
  <p>This is how it looks like the <code>header.component.html</code></p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;Logo Here&lt;/div&gt;
  
          &lt;div class="navbar-default"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;!-- Left Navigation Options --&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;!-- Right Navigation Options --&gt;
                  &lt;li class="dropdown" appDropdown&gt;
                      &lt;a routerLink="/" class="dropdown-toggle" role="button"&gt;Manage &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;
                              &lt;a style="cursor: pointer;" (click)="onSaveData()"&gt;Save Data&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;!-- Here is where I call the onFetchData method --&gt;
                              &lt;a style="cursor: pointer;" (click)="onFetchData()"&gt;Fetch Data&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>