Angular 5.2 Custom HttpClient class - Unable to change the responseType to blob

Question

I am using Angular 5.2 version in my project and running across issue with changing the default responseType to blob with new function.

Now i want to change the responseType to blob to download the excel file, but it is not working for me.

In my project, i have created the wrapper class as CustomHttpClient to make the Get or Post calls.

CustomHttpClient class looks like this :-

    export interface IRequestOptions {

    headers?: HttpHeaders;
    observe?: 'body';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
    body?: any;
}


/*Custom HttpClient Class for making the WebAPI calls.*/
export class CustomHttpClient {

    _defaultHeaderType = new HttpHeaders({ 'Content-Type': 'application/json' });

    // Extending the HttpClient through the Angular DI.
    public constructor(public _http: HttpClient) {

    }

  public Get<T>(endPoint: string, options?: IRequestOptions): Observable<T> {
        if (options == undefined) {
            options = <IRequestOptions>{};
            options.headers = this._defaultHeaderType
        }

        options.headers = this.injectClient(options.headers);
        return this._http.get<T>(endPoint, options);
    }

    public GetBlob<T>(endPoint: string, options?: IRequestOptions): Observable<T> {
        if (options == undefined) {
            options = <IRequestOptions>{};
            options.headers = this._defaultHeaderType
        }

        //This line is giving error
         options.responseType = 'blob';

        options.headers = this.injectClient(options.headers);
        return this._http.get<T>(endPoint, options);
    }
}

Now i want to call the GetBlob function and change the responseType to 'blob'. But it is showing me the error "Type "blob" is not assignable to type "Json"".

From the component service class, i am calling the fn like this :-

downloadTemplate(): Observable<any> {
    let opt = {
        headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Accept': 'application/xlsx'}),
        options: new RequestOptions({ responseType: ResponseContentType.Blob })
    }

    return this._httpObj.GetBlob(this._baseUrl + 'DownloadTemplate', opt);
}

Answer 1

Had the same issue recently, hope they'll fix it some time. I use Object.assign as workaround on this:

this._http.get<T>(endPoint, Object.assign(options, { responseType: 'blob' }))

this way you can cheat on ts type check.

Answer 2

Try to change your IRequestOptions interface so the the respone type is of string type. Like this:

  export interface IRequestOptions {

    headers?: HttpHeaders;
    observe?: 'body';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: string;
    withCredentials?: boolean;
    body?: any;
}