Angular2 - Cannot read property 'subscribe' of undefined in nested call
<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>