How to return result of inner observable in route resolver Angular

Question

I am trying write what seems like a simple method to fetch a users profile details for my Angular app and load that data before navigating to the profile page using a resolver. . The resolver doesn't complete even though there a no errors This is my code for the resolver class:

export class ProfileResolverService implements Resolve<Observable<any>> {

  constructor(private fs: FirestoreService, private auth:AuthService) { }

   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.auth.user.pipe(take(1),
      mergeMap(userdata => {
        return this.fs.getUserProfile(userdata.uid) //get user profile returns  Observable<unknown[]>
      })
    )
    
  }
   
}

and in my routing module:

path: 'profile',
            children: [
                {
                    path: '',
                    resolve: {
                      userdata: ProfileResolverService
                    },
                    loadChildren: () => import('../profile/profile.module').then( m => m.ProfilePageModule)
                }

Can anyone please help. Been on this for 2 days

what is your AuthService? is it the Firebase auth service or your own one? if then, can you please post how this.auth.user looks like? — critrange, Jul 11 '20 at 09:23

score 0 · Answer 1 · answered Jul 11 '20 at 09:09

There could be 2 reasons:

this.auth.user does not emit any value
this.fs.getUserProfile(userdata.uid) does not complete

Try this to see if you have any logs:

    return this.auth.user.pipe(
      take(1),
      mergeMap(userdata => {
        console.log('userdata: ', userdata);
        return this.fs.getUserProfile(userdata.uid).pipe(
          tap(profile => console.log('profile: ', profile));
          finalize(() => console.log('getUserProfile complete or error'));
        )
      })
    )

If your code is OK, you should at least having the log userdata and getUserProfile

Your solution helped! Had to map that inner observable to fix it — Randy Quaye, Jul 12 '20 at 02:13

score 0 · Accepted Answer · answered Jul 12 '20 at 02:13

Found the problem there:

export class ProfileResolverService implements Resolve<Observable<any>> {

  constructor(private fs: FirestoreService, private auth:AuthService) { }

   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.auth.user.pipe(take(1),
      mergeMap(userdata => {
        return this.fs.getUserProfile(userdata.uid).pipe(take(1),map(user => user)); //had to map the output of the observable and then fetch it in my rout resolver
      })
    )
    
  }
   
}```

So my resolver now looks like this:

path: 'profile', children: [ { path: '', resolve: { user: ProfileResolverService \get user instead of userdata }, loadChildren: () => import('../profile/profile.module').then( m => m.ProfilePageModule) }

score 0 · Answer 3 · answered Apr 05 '22 at 07:37

I had the exact same issue. It appears like you must subscribe to the observable in order for the resolver to resolve.

So in your case, it should look like so:

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.auth.user.pipe(take(1),
      mergeMap(userdata => {
        return this.fs.getUserProfile(userdata.uid) //get user profile returns  Observable<unknown[]>
      })
    ).subscribe()
    
  }

How to return result of inner observable in route resolver Angular

3 Answers3