Why am I obtaining this error trying to subscribe an Observable after the execution of RxJS tap() operator?

Question

I am working on an Angular application using Firebase FireStore database and I have the following problem trying to use RxJS. I will try to explain you what I am trying to do.

I simply have this service method defined into a service class:

  getPatientAesteticEvaluationData(patientUID): Observable<AestheticEvaluation> {
    return this.firestore.collection('aesthetic-evaluation')
    .doc(patientUID)
    .valueChanges()
    .pipe(
      map(aestheticEvaluation => !!aestheticEvaluation ? aestheticEvaluation : {}),
      tap(console.log)
    )
  }

The previous method should retrieve, if exist, data from a FireStore collection returning it as Observable.

Then into the component code I am doing:

  ngOnInit(): void {
    console.log("AestheticEvaluationComponent INIT");

    //this.patientAestheticEvaluationData$ = this.patientService.getPatientAesteticEvaluationData(this.patientUID)
    this.patientAestheticEvaluationData$ = this.patientService.getPatientAesteticEvaluationData(this.patientUID)
        .pipe(

          tap(aestheticEvaluationData => !!aestheticEvaluationData ? this.fillAestheticEvaluationForm(aestheticEvaluationData) : null),
          tap(console.log)
        );

    //this.patientAestheticEvaluationData$.subscribe();
  }

I am trying to call the previous service method in order to retrieve the returned Observable object. Then I am trying to access to the content of this object in order to call the fillAestheticEvaluationForm(aestheticEvaluationData) passing it these data.

At the moment this is the only code in my fillAestheticEvaluationForm() method:

  fillAestheticEvaluationForm(aestheticEvaluationData) {
    console.log("fillAestheticEvaluationForm START !!! aestheticEvaluationData: ", aestheticEvaluationData);

  }

The problem is that doing in this way this method is never called. I think that I have to subscribe the returned observable but if I try to do in this way:

this.patientAestheticEvaluationData$ = this.patientService.getPatientAesteticEvaluationData(this.patientUID)
    .pipe(

      tap(aestheticEvaluationData => !!aestheticEvaluationData ? this.fillAestheticEvaluationForm(aestheticEvaluationData) : null),
      tap(console.log)
    ).subscribe();

I obtain an error on this.patientAestheticEvaluationData$:

ERROR in src/app/features/patient/patient-details/aesthetic-evaluation/aesthetic-evaluation.component.ts:24:5 - error TS2740: Type 'Subscription' is missing the following properties from type 'Observable<AestheticEvaluation>': _isScalar, source, operator, lift, and 6 more.

24     this.patientAestheticEvaluationData$ = this.patientService.getPatientAesteticEvaluationData(this.patientUID)

What is wrong? What am I missing? How can I fix this code?

Answer 1

If you subscribe the Observable, you are no longer returning an Observable but a Subscription, you need to subscribe to the Observable in your component or simply return nothing and declare return type as void.