Subscribe is not a function of Observable

Question

I am trying to subscribe to an Observable, but everytime I try to subscribe I get this error:

this.authenticateService.getCurrentUser(...).subscribe is not a function at new HomeComponent

My getCurrentUser method looks like this:

getCurrentUser(): Observable<ICurrentUser> {
        return new Observable<ICurrentUser>(subscriber => {
            from(this.HttpService.get('/user/current')).subscribe(currentUser => {
                subscriber.next(currentUser);
            });
        });
    }

The ICurrentUser interface extends from IUser:

    interface IUser {
        uid: string;
        email: string;
        firstname: string;
        name: string;
        language: string;
        companyUid: string;
        companyName: string;
        password?: string;
        newPassword?: string;
        role: string;
        expirationDate: string;
        alternativeEmail?: string;
        alertSubscription?: boolean;
        license?: ILicense;
        isLocked: boolean;
        props: any;
    }
    
    interface ICurrentUser extends IUser {
        timeBeforeExpiration: number;
        graceLoginsRemaining: number;
        usingGraceLogins: boolean;
        autologon: boolean;
        termsAndAgreementsDate: string; // date
        workspaces: number[];
        markets: number[];
        findInAccessibleOnly: boolean;
    }

What I get from API when running the GET request:

{
    "uid": "xxxxx-xxxx-xxx-xxx",
    "email": "xxxx@xxxx",
    "firstname": "xxx",
    "name": "xxxx",
    "language": "xx",
    "companyUid": "xxxxx-xxxx-xxxxx-xxxxx",
    "companyName": "xxxx",
    "password": null,
    "newPassword": null,
    "role": "COMPANY_MANAGER",
    "expirationDate": null,
    "alternativeEmail": null,
    "alertSubscription": false,
    "license": null,
    "isLocked": null,
    "props": {
        "ff_findInAccessibleOnly": "true",
        "ff_timer_module": "false",
        "lexprhId": "28936",
        "defaultSearchFilters": "{\"keys\":\"*\",\"suggestReference\":null,\"documentTypeIds\":[],\"attributes\":{\"endDateOfApplicability\":[false],\"findInAccessibleOnly\":[false],\"book\":[],\"type\":[\"101\"],\"nature\":[\"163\",\"105\",\"101\",\"100\",\"103\",\"104\",\"106\",\"107\",\"108\",\"159\",\"158\",\"160\",\"109\",\"157\",\"110\",\"149\",\"115\",\"165\",\"114\",\"116\",\"111\",\"112\",\"113\",\"154\",\"155\",\"156\",\"153\",\"164\",\"117\",\"118\",\"119\",\"121\",\"120\",\"122\",\"124\",\"126\",\"129\",\"125\",\"128\",\"127\",\"130\",\"123\",\"135\",\"145\",\"131\",\"150\",\"134\",\"132\",\"136\",\"133\",\"152\",\"138\",\"151\",\"139\",\"140\",\"141\",\"142\",\"143\",\"144\",\"137\",\"146\",\"147\",\"148\"],\"jurisdiction\":[],\"sourceType\":[],\"source\":[],\"guidelineSource\":[],\"workspace\":[],\"domain\":[],\"territory\":[]},\"pagination\":{\"number\":1,\"size\":30,\"sort\":\"RELEVANCE\"},\"quickSearch\":false}"
    },
    "timeBeforeExpiration": -1,
    "graceLoginsRemaining": -1,
    "usingGraceLogins": false,
    "termsAndAgreementsDate": "2021-06-08T14:48:10.000+00:00",
    "workspaces": [
        1,
        2,
        8,
        101,
        100,
        4,
        102,
        7,
        5,
        3
    ],
    "markets": [
        1,
        0
    ],
    "findInAccessibleOnly": false,
    "autologon": false
}

```getCurrentUser(): Observable { return new Observable(subscriber => { from(this.HttpService.get('/user/current')).subscribe(currentUser => { subscriber.next(currentUser); }); }); }``` Why? — StPaulis, Jul 21 '21 at 09:49
It should be: `getCurrentUser = () => this.HttpService.get('/user/current')` that's should be an observable already. — StPaulis, Jul 21 '21 at 09:51
Because the httpClient is the old ngjs that gives promises instead of observables. — César Castro Aroche, Jul 21 '21 at 11:18
ΟΚ, first you should consider to change the httpClient but Again you can convert promise to observable with `from` so even there: `() => from(this.HttpService.get('/user/current'))` should do the job — StPaulis, Jul 21 '21 at 11:29
How are you importing `Observable`? My guess is you're inporting it from the wrong location. — Ingo Bürk, Jul 21 '21 at 11:30
Any way, read this: https://stackoverflow.com/questions/39319279/convert-promise-to-observable . It will help — StPaulis, Jul 21 '21 at 11:35
I'm importing the observable like this import { from, Observable } from 'rxjs'; — César Castro Aroche, Jul 21 '21 at 12:12

score 0 · Answer 1 · answered Jul 21 '21 at 12:46

If your HttpService is returning a promise, and from() converts a promise to an observable, why not just return that? Additionally, if getCurrentUser() needs no parameters, why is this a method? I would suggest the following:

getCurrentUser$ = from(this.HttpService.get<ICurrentUser>('/user/current'));

That makes getCurrentUser$ of the type Observable<ICurrentUser>. Anything that subscribes to it will receive the value from the HttpService promise.

Note: I'm assuming the .get() method allows generics, otherwise you can use type assertion.

ShayD · Answer 2 · 2021-07-21T11:26:33.260

-1

If you want to get an observable of the user, you can return it directly from the http service:

getCurrentUser(): Observable<ICurrentUser> {
    return this.HttpService.get('/user/current');
}

And if you want to store it in a variable, you can subscirbe to it in ngOnInit like:

CurrentUser:ICurrentUser;
ngOnInit(){
  this.HttpService.get('/user/current').subscribe(user=>{
    this.CurrentUser = user;
  });
}

If you are using the old http then use the from method like this:

getCurrentUser(): Observable<ICurrentUser> {
    return from(this.HttpService.get('/user/current'));
}

Or for storing in a variable:

CurrentUser:ICurrentUser;
ngOnInit(){
  from(this.HttpService.get('/user/current')).subscribe(user=>{
    this.CurrentUser = user;
  });
}

edited Jul 21 '21 at 11:26

answered Jul 21 '21 at 09:57

ShayD

689
7
17

Yeah the problem is that I'm working with hybrid application ngjs and ng10 and the httpClient that we are using is the old one from ngjs that returns promises. – César Castro Aroche Jul 21 '21 at 11:08
ok. edited answer with code for the old http – ShayD Jul 21 '21 at 11:27
No part of this answers the question, it's unrelated (albeit valid) recommendations. – Ingo Bürk Jul 21 '21 at 11:29
@Ingo Bürk , The OP didn't realy asked any question. From my understanding, he want to subscribe successfully to the the observer by converting the promise to an observser. My third example is the answer for that. If you have other interpretation for what the OP is asking, please share. – ShayD Jul 21 '21 at 12:19
He's asking why the error occurs. While `new Observable` seems overkill for the use-case, it should in theory work. – Ingo Bürk Jul 21 '21 at 12:30

score -1 · Answer 3 · answered Jul 21 '21 at 10:35

-1

getCurrentUser(): Observable<ICurrentUser> {
    return new Observable<ICurrentUser>(subscriber => {
        from(this.HttpService.get('/user/current')).subscribe(currentUser => {
            subscriber.next(currentUser);
        });
    });
}

change to

getCurrentUser(): Observable<ICurrentUser> {
   return this.HttpService.get<ICurrentUser>('/user/current'));
}

answered Jul 21 '21 at 10:35

r2018

505
4
14

Yeah the problem is that I'm working with hybrid application ngjs and ng10 and the httpClient that we are using is the old one from ngjs that returns promises. – César Castro Aroche Jul 21 '21 at 11:08
Even if this change was possible, it wouldn't answer the question and should rather be a comment. – Ingo Bürk Jul 21 '21 at 11:29

Subscribe is not a function of Observable

3 Answers3