Router not resolving navigate Angular with AngularFirestore returns

Question

The navigation is not resolved with the programming logic below.

I must be doing something wrong, but I can not identify the problem.

If I create a separate function and run the combineLatest() operator and it subscribes, the value of the two Observables is received.

I need to resolve the two Observable type returns, need access from my component.

this.convenios = this._route.snapshot.data ['data'] [0];
this.pacientes = this._route.snapshot.data ['data'] [1];

resolve.ts:

@Injectable({
   providedIn: 'root'
})
export class PacienteFormService implements Resolve<any>
 {
   public routeParams: Params;

constructor(
    private _pacientesService: PacientesService, // extends Database
    private _conveniosService: ConveniosService, // extends Database
) {
}

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<[Paciente, Convenio[]]> {

    this.routeParams = route.params;
    const pacienteId = this.routeParams.id;

    return combineLatest(
        this._pacientesService.get(pacienteId),
        this._conveniosService.list()
    );
}

database.ts:

@Injectable({
    providedIn: 'root'
})
 export abstract class Database<IBaseEntity> implements 
 IDatabaseService<IBaseEntity> {

protected collection: AngularFirestoreCollection<IBaseEntity>;

constructor(
    private path: string,
    protected afs: AngularFirestore,
    protected auth: AuthService,
) {
    const pathRef = `${this.auth.firestoreCollection}/${this.path}`
    this.collection = this.afs.collection(pathRef);
}

public get(identifier: string): Observable<IBaseEntity> {
    return this.collection
        .doc<IBaseEntity>(identifier)
        .snapshotChanges()
        .pipe(
            map(doc => {
                if (doc.payload.exists) {
                    const data = doc.payload.data() as any;
                    const id = doc.payload.id;
                    return { id, ...data };
                }
            })
        );
}

public list(): Observable<IBaseEntity[]> {
    return this.collection
        .snapshotChanges()
        .pipe(
            map(changes => {
                return changes.map(a => {
                    const data = a.payload.doc.data() as any;
                    data.id = a.payload.doc.id;
                    return data;
                });
            })
        );
}

Answer 1

I had the same issue some time ago and the problem was that the observable never resolves. To fix this you should use take(1) or first():

return combineLatest(
  this._pacientesService.get(pacienteId),
  this._conveniosService.list()
)
.pipe(first());