Angular 10: Unable to override 'request' method of HttpClient

Question

I'm trying to use inheritance on HttpClient and override all its common methods

but Typescript is pointing an error when I try to override the request method

is there an explanation about error pointing out by Typescript

because it didnt have error when I override GET/POST/PUT/DELETE/OPTIONS

this only 'request' method only like this

Take a look at your declaration of the options attribute, and compare that to the base class. — Simon
– Simon, Commented Sep 28, 2020 at 11:47
Yep. done comparing it to the base class and I believe those parameter in my screenshot is the right parameters. about the option parameter, I intentionally set its type to 'any' so I could pass the parameters without having trouble in the lint since its type is an anonymous object — aj go
– aj go, Commented Sep 28, 2020 at 12:27

Simon · Accepted Answer · 2020-09-28 14:01:57Z

1

This runs through ng build

@Injectable()
export class FoobarHttpClient extends HttpClient {

    request( method: string, url: string, options?: {
        body?: any;
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        observe?: 'body' | 'events' | 'response'; // == HttpObserve;
        reportProgress?: boolean;
        responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
        withCredentials?: boolean;
    } ): Observable<any> {
        return super.request( method, url, options );
    }

}

My project is still on Angular 9, and there http.d.ts doesn't expose the internally used HttpObserve (maybe that's now exported in Angular 10, I didn't check).

If you haven't done so already, I recommend looking into the ng HttpInterceptor. Using an interceptor is the common approach to customize HttpClient-behavior.

answered Sep 28, 2020 at 14:01

Simon

3,3163 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aj go Over a year ago

I did something like this approach but it still pointing the same thing on my intellisense. could you provide some link on how I could achieve the same thing using Interceptor?

Simon Over a year ago

From SO: stackoverflow.com/questions/48348946/… or stackoverflow.com/questions/54733093/…. From medium eg. medium.com/angular-in-depth/…

aj go · Accepted Answer · 2020-09-28 13:44:45Z

0

This is only hack but I couldn't think of a proper way to solve this

so just by declaring the 'request' method in this way, I could remove that error:

request: any = (method: string, url: string, options?: any): Observable<any> => {

    if (this.authService.config.activateInterception) {
        return this.requestWithRetry(method, url, 0, options);
    }
    else {
        return super.request(method, url, options);
    }
}

answered Sep 28, 2020 at 13:44

aj go

7242 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular 10: Unable to override 'request' method of HttpClient

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related