Observable HttpEvent is not assignable to type Observable in Typescript-CodePudding

I'm calling REST API from my angular app, I've written below service class in typescript. I want to call different url and pass different headers based on the environment selection. For example: if environment is dev then userURL value should be http://mydomain-dev.com/users/ and header should be devHttpOptions, similarly for QA - the userURL should be http://mydomain-qa.com/users/ and header should be qaHttpOptions and so on.

I've written below switch case statement, based on environment value, I'm deciding which url and header should be assigned.

But I'm getting below compile time error when I pass this.httpOptions in get method - this.http.get<User[]>(this.userURL, this.httpOptions)

Type 'Observable<HttpEvent<User[]>>' is not assignable to type 'Observable<User[]>'.
  Type 'HttpEvent<User[]>' is not assignable to type 'User[]'.
    Type 'HttpSentEvent' is missing the following properties from type 'User[]': length, pop, push, concat, and 28 more.ts(

Please find my code below:

UserService.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { User } from "./user";
import { HttpHeaders } from '@angular/common/http';


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

    constructor(private http: HttpClient) { }

    userURL: any;
    httpOptions: any;
    devHttpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Authorization': 'Basic '   btoa('dev-xxxx:yyyy')
        })
    };

    qaHttpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Authorization': 'Basic '   btoa('qa-xxxx:yyyy')
        })
    };

    prodHttpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Authorization': 'Basic '   btoa('prod-xxxx:yyyy')
        })
    };


    getUsers(environment): Observable<User[]> {

        console.log(environment);
        switch (environment) {
            case 'dev':
                this.userURL = 'http://mydomain-dev.com/users/';
                this.httpOptions = this.devHttpOptions;
                break;
            case 'qa':
                this.userURL = 'http://mydomain-qa.com/users/';
                this.httpOptions = this.qaHttpOptions;
                break;
            case 'prod':
                this.userURL = 'http://mydomain-prod.com/users/';
                this.httpOptions = this.prodHttpOptions;
                break;

        }
        return this.http.get<User[]>(this.userURL, this.httpOptions);
    }

}

Could you please help me with this issue. Appreciated your help in advance! Thanks!

CodePudding user response：

http headers is not found on the httpsOptions variable of type any so you can use it directly this way. You should do something like this:

return this.http.get<User[]>(this.userURL, {
        headers: this.httpOptions?.headers
    });

CodePudding user response：

You can see all of the overloads for get() here:

https://angular.io/api/common/http/HttpClient#get

It doesn't know that httpOptions is an object so it is using the wrong overload. When you use any it defaults to the first overload that matches get<T> which returns Observable<HttpEvent<T>>. If you declare an object that does not have an observe property on it, it'll use the overload you want, since observe is an optional property on that one, while it is required on the others.

Initialize httpOptions as an object or declare it as an object.

httpOptions = {};

httpOptions: Object;