Type 'Promise' is not assignable to type 'Observable'

Question

I am attempting to preload a user's profile before the profile page loads using resolver. But I am getting the error

Type 'Promise' is not assignable to type 'Observable'

This what my code currently looks like

profile.service.ts

import { AngularFirestore } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';

import { AuthenticateService } from './../auth/authenticate.service';

@Injectable({
  providedIn: 'root'
})
export class ProfileService {

  constructor(public authService: AuthenticateService, private afs: AngularFirestore) { }

  findUserProfile(id: string) {
    console.log('User ID to search for is: ' + id);

    return this.afs.collection('profiles').doc(id).ref.get().then(doc => {
      return doc.data();
    });
  }
}

profile-resolver.service.ts

import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';

import { ProfileService } from './profile.service';
import { AuthenticateService } from 'src/app/auth/authenticate.service';
import { Observable } from 'rxjs';
import { Profile } from './profile';

@Injectable({
  providedIn: 'root'
})
export class ProfileResolverService {
  profile: Profile;

  constructor(private ps: ProfileService, private router: Router, private authService: AuthenticateService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Profile> {
    if (this.authService.user != null) {
      const userId = this.authService.user.uid;

      return this.ps.findUserProfile(userId);
    }
  }
}

I am using the resolver in profile.module.ts to advertise the resolver to the route like this

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ProfilePage } from './profile.page';

import { ProfileResolverService } from './../profile-resolver.service';

const routes: Routes = [
  {
    path: '',
    component: ProfilePage,
    resolve: {
      userProfile: ProfileResolverService
    }
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ProfilePage],
  providers: [ProfileResolverService]
})
export class ProfilePageModule { }

Unfortunately my code is throwing up the Type Promise is not assignable to type 'Observable'

Why am I doing wrong and how do I fix it.

You should check this: https://stackoverflow.com/questions/39319279/convert-promise-to-observable — dlcardozo, May 09 '19 at 22:44
@dlcardozo the `findUserProfile` of the profile service actually returns that data I am looking for which is what I am calling in my resolver. I admit I am not very good with observables but from the answers on that post, I seems I would have to change the way I am returning the data from the query. I was hoping I wouldn't need to change code anywhere except in the resolver. Any pointers? — Mena, May 10 '19 at 11:19

score 0 · Answer 1 · answered May 11 '19 at 11:50

I was able to resolve the issue by changing the observable type from Profile to any. For some reason I am still trying to figure out, the Profile class was introducing a bug. This is what my working resolver code looks like

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticateService } from './../../auth/authenticate.service';
import { ProfileService } from '../profile.service';

@Injectable({
  providedIn: 'root'
})
export class ProfileResolverService implements Resolve<any> {

  constructor(private profileService: ProfileService, public authService: AuthenticateService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    if (this.authService.user != null) {
      const userId = this.authService.user.uid;
      return this.profileService.findUserProfile(userId);
    }
  }
}

If you spot something I did not do right, leave a comment so I can review it.

Type 'Promise' is not assignable to type 'Observable'

1 Answers1