Angular2 - Cannot read property "subscribe" undefined in nested call

Question

I examined a number of resources, including this , this, and this , but I could not achieve the desired result.

All I'm trying to do is authenticate the user (using firebase) and then after authentication load my profile and save it in the userProfile variable before loading the next page. Dashboard:

My Login Service:

 public signinUser(user: User) { this.af.auth.login({ email: user.email, password: user.password }, { provider: AuthProviders.Password, method: AuthMethods.Password } ) .then( success => { console.log('Authenticated'); this.getProfile().subscribe( // PROBLEM is here profile => { console.log(profile); console.log('Profile Loaded'); this.router.navigate(['/dashboard']); } ) } ) .catch(function (error) { ... console.log('ERROR SIGNING USER IN'); } 

My getProfile() method:

 public getProfile(): Observable<any> { return this.af.database.object('/profiles/' + this.user.uid) .flatMap( profile => { console.log('inside success'); console.log(profile); this.userProfile = <User>profile; console.log('getProfile has completed'); return profile; }, error => { console.log(error) }); 

Here is what the log part looks like:

 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: " [e-mail]2 ", github: "aaa" name: "a", password: "123123"…} auth.service.ts:188 getProfile has completed() auth.service.ts:185 

I see that the methods individually work as intended. The user is authenticated and the profile is loaded (displayed in the log). The problem is the subscription event for reasons I don't know.

Answer 1

Ok, this is weird, but I restarted webpack and seems to have cured the problem.

This is what the code looks like, and it is authenticated correctly with the promise, and then it successfully loads the profile, which then loads the next page:

My signinUser method:

 public signinUser(user: User) { this.af.auth.login({ email: user.email, password: user.password }, { provider: AuthProviders.Password, method: AuthMethods.Password } ) .then( success => { console.log('Authenticated'); this.getProfile().subscribe( profile => { this.router.navigate(['/dashboard']); }, error => console.log(error) ) 

And my getProfile method:

 public getProfile(): Observable<User> { return this.af.database.object('/profiles/' + this.user.uid) .map( profile => { console.log('inside success'); console.log(profile); this.userProfile = <User>profile; console.log(this.userProfile); return profile; }, error => { console.log(error) }); } 

Column:

• User authenticated
• Subscribe to getProfile and wait for the method to complete ...
  • GetProfile () method executed
  • Profile set
• Page redirected

Answer 2

I think the problem is that getProfile does not actually return an Observable .

You use flatMap so that you can bind the observable sequence and return the profile as observable. But for this to work, your callback inside flatMap must return a promise or observable (as I learned from this answer ). Otherwise, the chain of observables is broken.

So what you probably need to do is something like:

 public getProfile(): Observable<any> { return this.af.database.object('/profiles/' + this.user.uid) .flatMap( profile => { console.log('inside success'); console.log(profile); this.userProfile = <User>profile; console.log('getProfile has completed'); return Promise.resolve(profile);//<-- this is what needs to be changed }, error => { console.log(error) });