There is no overload match for the HttpClient.get call at this time

I'm trying to set up a file download feature using a blob, but I need to extract the filename from the server's "content-disposition" header. Here's the code I have:

const header = {Authorization: 'Bearer  ' + token};
const config = {headers: header, responseType: 'blob' as 'blob', observe: 'response' as 'response'};
return this.http.get<HttpResponse<Blob>>(url, config);

However, I encountered this error:

error TS2345: Argument of type '{ headers: { Authorization: string; }; responseType: "blob"; observe: "response"; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'.
Types of property 'observe' are incompatible.
Type '"response"' is not assignable to type '"body"'.

Looking at the function definition, it appears to be constructed for handling `GET` requests that expect a Blob response:

/**
 * Constructs a `GET` request that interprets the body as a `Blob` and
 * returns the full `HTTPResponse`.
 *
 * @param url     The endpoint URL.
 * @param options The HTTP options to send with the request.
 *
 * @return An `Observable` of the `HTTPResponse` for the request,
 *  with the response body as a `Blob`.
 */
get(url: string, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe: 'response';
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType: 'blob';
    withCredentials?: boolean;
}): Observable<HttpResponse<Blob>>;

If you can help me understand what I might be doing wrong, I would greatly appreciate it.

Thank you for your assistance!

Answer №1

You have implemented a function with a generic version, however, you are referring to non-generic documentation. The specific overload you are trying to use does not support the parameters

observe: 'response', responseType: 'blob'
.

Instead, consider using the non-generic version:

const header = {Authorization: 'Bearer  ' + token};
const config = {headers: header, responseType: 'blob' as 'blob', observe: 'response' as 'response'};
return this.http.get(url, config);

All the available generic overloads only permit responseType: 'json'.

Find more information at: https://github.com/angular/angular/blob/master/packages/common/http/src/client.ts

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve data from Ionic storage

Need help with Ionic storage value retrieval. Why is GET2 executing before storage.get? My brain needs a tune-up, please assist. public storageGet(key: string){ var uid = 0; this.storage.get(key).then((val) => { console.log('GET1: ' + key + ...

Webpack 2.7.0 throws an error: "Unexpected parameter: theme"

At the moment, I am on webpack 1.16.0 and using --theme as an argument to set the output path and plugin paths. The command appears as: rimraf dist && webpack --bail --progress --profile --theme=<name of theme> However, as I try to upgrade ...

Trouble arises when extending an MUI component due to a TypeScript error indicating a missing 'css' property

We have enhanced the SnackbarContent component by creating our own custom one called MySnackbarContent: export interface MySnackbarContentProps extends Omit<SnackbarContentProps, 'variant'> { variant?: MyCustomVariant; type?: MyCustomTy ...

Storing a reference globally in React and Typescript: Best practices

In my application, I have multiple instances of a specific component called <Item>. Each <Item> needs to display a dynamic tooltip when hovered over. To achieve this, I am utilizing semantic-ui-react and its Popup component. The conventional m ...

Creating global variables in NodeJS allows you to access and modify data

Currently, this construct is being utilized to create a global LOG: declare global { let LOG: Logger; } // eslint-disable-next-line @typescript-eslint/no-namespace declare namespace globalThis { let LOG: Logger; } globalThis.LOG = new Logger(); It f ...

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

Is there a way to consolidate all the glyphicons into a single folder during the Angular 4 build process?

My CLI-created application is configured using the angular-cli.json file below: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "lienholder" }, "apps": [ { "root": "src", "outDir": "dist" ...

Flexible type definition including omission and [key:string]: unknown

When I write code, I like to explain it afterwards: type ExampleType = { a: string; b: boolean; c: () => any; d?: boolean; e?: () => any; [inheritsProps: string]: unknown; // If this ^ line over is removed, TypeNoC would work as expecte ...

Creating a table with a horizontal layout using Angular Material's mat-table

I am currently utilizing angular material 8.2.3 for my website. However, I have encountered a seemingly simple issue that has me stuck. I am looking to display a table horizontally instead of vertically. In my table, I only have two columns. Below is the ...

When the observable is subscribed to, the data is not immediately available

I am encountering an issue with syncing data from an observable in a service with a component that consumes the data. The data service makes a call to an api service upon creation to gather a list of devices from a server. It seems like this process is fun ...

NestJS does not recognize TypeORM .env configuration in production build

Currently, I am developing a NestJS application that interacts with a postgres database using TypeORM. During the development phase (npm run start:debug), everything functions perfectly. However, when I proceed to build the application with npm run build a ...

Trigger a modal from one sibling Angular component to another

My application utilizes an Angular6 component architecture with the following components: <app-navbar></app-navbar> <app-dashboard></app-dashboard> The Dashboard component consists of: <app-meseros> </app-meseros> < ...

The content displayed in the PrimeNG p-table is limited to only the table name with no additional information

After upgrading Angular to version 9, I switched from p-dataTable to p-table in PrimeNG. With a table named users, I intended to display them on the screen upon rendering the view using the following HTML: users = ['one','two','thr ...

Creating a dynamic configuration for service instantiation in Angular 4/5

Currently working on a library that has an AuthModule with an AuthService for managing OAuth2 authentication using oidc-client-js. I want the application using this library to be able to set up the configuration for the OAuth client. One way to do this is ...

What is the best way to connect a series of checkboxes within a form utilizing Angular?

I created a form with checkboxes that allow users to select multiple options. However, when I submit the form, instead of receiving an array of objects representing the checked checkboxes, I'm not getting anything at all. Here is what I see in the co ...

Exploring Angular 2 Paper-Input for Effective Form Management

I've been working on implementing Ng2 FormBuilder with paper-inputs and have successfully managed to get the bindings and validation up and running. You can check out my progress here: https://plnkr.co/edit/tr1wYZFyrn4uAzssn5Zs?p=preview <paper-i ...

TypeScript interface with an optional parameter that is treated as a required parameter

Within my interface, I have a property that can be optional. In the constructor, I set default values for this property, which are then overridden by values passed in as the first parameter. If no properties are set, the defaults are used. I am looking fo ...

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Hello everyone, I am attempting to customize the label text color of a radio button to turn blue when selected. https://i.stack.imgur.com/btSc2.jpg HERE IS THE CODE FOR MY MUI BUTTON SO FAR import * as React from "react"; import Radio from &quo ...

When the user clicks on a specific element, ensure that it is the main focus and generate an overlay

One of my challenges is implementing a custom element that captures user input upon clicking, focusing on it and overlaying other elements. I want the overlay to disappear if the user clicks outside the div. I attempted to achieve this using the iron-over ...

Build an object using a deeply nested JSON structure

I am working with a JSON object received from my server in Angular and I want to create a custom object based on this data. { "showsHall": [ { "movies": [ "5b428ceb9d5b8e4228d14225", "5b428d229d5b8e4 ...