title: Angular2 - Cannot read property 'subscribe' of undefined in nested call
body: <p>I have looked at a number of resources including <a href="https://stackoverflow.com/questions/37341619/cannot-read-property-subscribe-of-undefined-in-nested-calls-in-angular-2">this</a>, <a href="https://stackoverflow.com/questions/36712659/angular-2-two-backend-service-calls-on-success-of-first-service/36712707#36712707">this</a> and <a href="https://stackoverflow.com/questions/35173649/angular2-how-to-chain-async-service-calls-http-requests-in-a-component">this</a>, but I have not been able to achieve the desired result. </p>
  
  <p>All I'm trying to do is authenticate a user (using firebase) and then once authenticated, load up their profile and store it in a variable <code>userProfile</code> before loading up the next page Dashboard: </p>
  
  <p>My Signin service: </p>
  
  <pre><code>public signinUser(user: User) {
      this.af.auth.login({
          email: user.email,
          password: user.password
      },
          {
              provider: AuthProviders.Password,
              method: AuthMethods.Password
          }
  
      )
          .then(                
          success =&gt; {
              console.log('Authenticated');
              this.getProfile().subscribe( // PROBLEM is here
                  profile =&gt; {
                      console.log(profile);
                      console.log('Profile Loaded');
                      this.router.navigate(['/dashboard']);
                  }
              )               
          }
          )
          .catch(function (error) {
              ...
              console.log('ERROR SIGNING USER IN');
          }
  </code></pre>
  
  <p>My <code>getProfile()</code> method:</p>
  
  <pre><code>public getProfile(): Observable&lt;any&gt; {            
          return this.af.database.object('/profiles/' + this.user.uid)
          .flatMap(
              profile =&gt; {
                  console.log('inside success');
                  console.log(profile);
                  this.userProfile = &lt;User&gt;profile;                    
                  console.log('getProfile has completed');       
                  return profile;
              },
              error =&gt; {
                  console.log(error)
              });
  </code></pre>
  
  <p>This is how part of the log looks:</p>
  
  <pre><code>Authenticated
  auth.service.ts:104 ERROR SIGNING USER IN
  auth.service.ts:105 TypeError: Cannot read property 'subscribe' of undefined
  at auth.service.ts:91
  at ZoneDelegate.invoke (zone.js:232)
  at Object.onInvoke (ng_zone.js:238)
  at ZoneDelegate.invoke (zone.js:231)
  at Zone.run (zone.js:114)
  at zone.js:502
  at ZoneDelegate.invokeTask (zone.js:265)
  at Object.onInvokeTask (ng_zone.js:229)
  at ZoneDelegate.invokeTask (zone.js:264)
  at Zone.runTask (zone.js:154)
  auth.service.ts:106 Cannot read property 'subscribe' of undefined
  auth.service.ts:184 inside success
  auth.service.ts:185 Object {confirmPassword: "123123", email: "aaa@gmail.com2", github: "aaa" name: "a", password: "123123"…}
  auth.service.ts:188 
  getProfile has completed()
  auth.service.ts:185
  </code></pre>
  
  <p>I can see that the methods, individually are working as intended. The user authenticates, and the profile is loaded (shown in log). The problem lies with the subscribe event for reasons which I do not know. </p>