Nativescript-angular: Reponse type of 'blob' not supported on HttpClient

[tsonevn]

_From @BeMor81 on February 15, 2018 17:11_

Dear friend, we, the rest of the NativeScript community really
appreciate your feedback! While we are doing all we can to take care of every
issue, sometimes we get overwhelmed. Because of that, we will consider issues
that are not constructive or problems that cannot be reproduced "dead".
Additionally, we will treat feature requests or bug reports with unanswered
questions regarding the behavior/reproduction for more than 20 days "dead". All
"dead" issues will get closed.

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo? Yes

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital
Reponse type of 'blob' not supported on HttpClient
letter.

Which platform(s) does your issue occur on?

iOS/Android/Both
Tested just on Android

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 3.4.2
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
  package.json file of your project) 3.4.0
• Plugin(s): (look for the version number in the package.json file of your
  project)

Please tell us how to recreate the issue in as much detail as possible.

The best approach would be to get your code running in the NativeScript Playground and share the link with us, along with any additional details or steps to reproduce needed for examining the issue there.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Getting the following error when running the following service below.

import { Injectable } from "@angular/core";
import { HttpParams, HttpClient, HttpHeaders, HttpResponse, HttpClientJsonpModule } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/map";

import { Config } from "../config";

@Injectable()
export class ImageLoaderService {
constructor(private http: HttpClient) {}

loadImage(imgUrl) {
this.http.get(
imgUrl, { responseType: 'blob' }
).subscribe();
}
}

_Copied from original issue: NativeScript/NativeScript#5427_

[tsonevn]

Hi @BeMor81,

Thank you for contacting us.
Try to set up the request header as it is shown in our SDK example, where you should set the Content-Type to blob.

If the issue is still reproducible, please provide some more info about the problem as well as a sample project, which could be used for debugging.

[BeMor81]

Still the same unfortunatley. Please find link to example below.

https://github.com/BeMor81/Nativescript-Test-Blob

[BeMor81]

Full error details returned

JS: "zoneAwareStack": "Error: Response type of 'blob' not supported.n at XMLHttpRequest.set [as responseType] (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/tns-core-modules/xhr/xhr.js:200:23) [angular]n at Observable._subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/@angular/common/bundles/common-http.umd.js:2195:34) [angular]n at Observable._trySubscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observable.js:172:25) [angular]n at Observable.subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observable.js:160:93) [angular]n at Object.subscribeToResult (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/util/subscribeToResult.js:23:27) [angular]n at MergeMapSubscriber._innerSub (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/operators/mergeMap.js:132:38) [angular]n at MergeMapSubscriber._tryNext (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/operators/mergeMap.js:129:14) [angular]n at MergeMapSubscriber._next (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/operators/mergeMap.js:112:18) [angular]n at MergeMapSubscriber.Subscriber.next (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Subscriber.js:90:18) [angular]n at ScalarObservable._subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/observable/ScalarObservable.js:49:24) [angular]n at ScalarObservable.Observable._trySubscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observable.js:172:25) [angular]n at ScalarObservable.Observable.subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observ
JS: able.js:160:93) [angular]n at MergeMapOperator.call (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/operators/mergeMap.js:87:23) [angular]n at Observable.subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observable.js:157:22) [angular]"

[adriangarzas]

Hi guys!, I´m experiencing the same issue!, @BeMor81 did you find a fix or a workaround?

[tsonevn]

Hi @BeMor81 @adriangarzas,
I have just tested the @BeMor81's project and was able to recreate the issue.
We will investigate what is causing this problem and will provide more info on it.

[alexma01]

It has not been solved?

[tsonevn]

Hi @alexma01,
This is still a valid issue. Regarding that, any PR which provides a fix will be highly appreciated. For further info, you could review our contributing guidelines..

[shahidbits]

+1. Facing the same issue even today :(

[yoat]

The workaround I found for this (how to request binary files, async, with built-in networking library) was to avoid HttpClient and use Http.

const httpModule = require("http");

httpModule.getImage(myPath);

getImage returns a Promise<ImageSource> which can be incorporated into your Angular service, translated to Observer, etc.

Basically, skip the rudimentary Blob handling and use a pre-made binary/image request procedure. Other methods available on the (NativeScript Http module)[https://docs.nativescript.org/ns-framework-modules/http]:

getString
getJSON
getImage
getFile
request

No need for low level Blob handling. I hope that is a useful workaround.

[BeMor81]

Hi @yoat That works unless there's a reason you want to use HttpClient such as the implementation of a HttpInterceptor which isn't picked up via getImage unfortunately. I'm sure this will be a good work around for many though.

[NickIliev]

+1 from t.1344240

@tsonevn @BeMor81 @adriangarzas @alexma01 @yoat marking the issue as a feature (and not bug) as the requested functionality was not supported (and this is why the related message was printed Response type of 'blob' not supported.).

As @DickSmith pointed out a possible solution is to introduce the blob type in the XHR module

export var blob= "blob";

And then with repacked tns-core-modules to re buiold the app and make a HEAD request:

this.http.head(apiUrl).subscribe((res: HttpResponse<Blob>) =>
  if (res) {
    // proceed with the data e.g. using res.url to create an image via the `fromUrl` method

Still, the Blob support needs full & proper and tested implementation in the HTTP module so it would work in the HttpClient for Angular base applications. All suggestion and contributing PRs are welcomed.

Related to this feature reques.
Partial but not complete implementation of blob is introduced in the fetch module

[marablec]

+1

[seveneye]

+1

[pmoelgaard]

until this is fixed, and since I'm using a library for API CodeGen, so I can't easily change the implementation, I ended up using this one...
blob-polyfill