Angular fail to download file > 10MB from server on Google Chrome

Question

I'm using a service in my Angular 6 App to download a file (blob) from my REST API. This service works perfectly with files < 10MB (on Chrome and other browsers). I'm currently trying to download a 14MB file and it fails, only on Chrome (works as intended with Firefox)

I think it is a Chrome limitation but I can't find any information about this on SO or Angular docs.

Here is my service

displayFile(url: string) {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    this.http.post('my_backend_path/getFile', JSON.stringify({urlData: url}), {responseType: "blob", headers})
      .subscribe((data: any) => {
          var urlBlob = window.URL.createObjectURL(data);
          window.open(urlBlob);
        },
        (error) => {
          //Here comes the error
        });
  }

My Node REST API returns the file properly with a 200 status. The fail comes in Chrome console, like this :

POST my_backend_path/getFile net::ERR_FAILED 200 (OK)

In the chrome's network debugger, I can read that the file size is estimated to exactly 10.0MB (whereas the file is doing 14MB actually). That is why I think this is due to some Chrome or Angular HTTPClient limitation.

Does anyone have an idea ?

Answer 1

I think you need to change the responseType : to ArrayBuffer. It works for me

{responseType: "arrayBuffer", headers})

Answer 2

I had this problem - Chrome logged net::ERR_FAILED 200 (OK) on API call which returned over 10mb of json. Surprisingly it worked in Incognito mode and no one around was affected.

The solution in my case was to clean up C: drive. It had low disk space (around 200 Mb). After the disk cleanup Chrome started to behave.

Answer 3

Faced the exact same problem. But strangely enough, the download works fine in Incognito-mode of chrome. You may try the same.