How to return result of inner observable in route resolver Angular

Issue

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

Solution

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) }

Answered By - Randy Quaye