Type 'Subscription' is missing the following properties from type 'Observable<StringMap<any>>'

Question

ERROR : Type 'Subscription' is missing the following properties from type 'Observable>': _isScalar, source, operator, lift, and 6 more.ts(2740)

Here I have attached my code.

Here, in my case, I have two methods which return an observable, but getByTypeData and getByType. But, on returning this.getByType(type).. from getByTypeData() I am getting above error.

P.S.: I want to subscribe getByTypeData in my component which should return me an observable. AND I AM NEW TO RXJS...


  /*
   interface IStringMap<T> {
        [index: string]: T;
    }
    */

    getByTypeData(type: string, ignoreApi = false): Observable<stringMap<any>> {
        if (ignoreApi) {
            this.handleConfig(type);
        }
        return this.getByType(type)
            .subscribe(response => {
                const config = response.result ? response.data : {};
                return this.handleConfig(type, config);
            });
    }

  // This method in another file (Just for reference)

    getByType(type: string): Observable<stringMap<any>> {
        return this.httpClient.get(`get url`);
    }

      handleConfig(type: string, config: stringMap<string | number> = {}): Observable<stringMap<any>> {
        if (type === this.types) {
            config.token = this.anotherservice.GetKey('mykey');
            if (config.token) {
                // logic
            }
        }

        if (type === this.types) {
            // logic
        }
        return of(config);
    }

You said you'd return an observable, but are returning a subscription. Don't do that. — jonrsharpe
Hi @jonrsharpe, can you please explain in detail a bit. May be through my code? Thanks. — TheDoozyLulu
Well when you wrote : Observable<stringMap<any>> that meant "this function will return an observable", but then return this.getByType(type).subscribe(...) returns a subscription, which is not an observable. Either change what you say you're returning, or change what you are returning. — jonrsharpe

dmcgrandle dmcgrandle · Accepted Answer · 2019-08-30T17:48:30

As pointed out in the comments, you are returning a Subscription instead of returning an Observable. I would suggest you read the documentation to get a good idea of the difference between them.

In your particular case, I would suggest you try something like the following instead:

getByTypeData(type: string, ignoreApi = false): Observable<stringMap<any>> {
    if (ignoreApi) {
        return this.handleConfig(type);
    }
    return this.getByType(type).pipe(
        switchMap(response => {
            const config = response.result ? response.data : {};
            return this.handleConfig(type, config);
        })
    );
}

switchMap is an rxjs operator that needs to be imported with a statement like this:

import { switchMap } from 'rxjs/operators'

Documentation on this operator can be found here
A good article explaining the mapping operators is here

Type 'Subscription' is missing the following properties from type 'Observable<StringMap<any>>'

1 Answers