[SOLVED] Angular 19: Observable Http File Download ends prematurely

Angular 19: Observable Http File Download ends prematurely

I have a service to download a file and a component to handle downloading it. The download happens and returns a 200 with the blob data but the observable ends immediately. As soon as the http call finishes, no other RXJS operators or subscribes fire. I'm at a loss on this one.

I can't provide full code but I can answer questions or provide obfuscated versions of code.

Node 22.13
WSL Ubuntu 24.04
Angular 19.0.6
RxJs 7.8.0

Service

  downloadAttachment(id: string, fileName: string) {
    return this.url$.pipe(
      mergeMap(url => this.httpClient.get<Blob>(`${url}/attachment/${id}`)),
    );
  }

Component

  handleDownloadClick(id: string) {
    this.noteService.downloadAttachment('some-id', 'random 
    file.pdf').subscribe(() => {
     // console doesn't happen
     console.log('data');
});}

Solution

by default angular HttpClient tries to parse the resposne as json, which doesn't work in your case and it errors

to fix that just use {responseType: 'blob'}

this.httpClient.get<Blob>(`${url}/attachment/${id}`, {responseType: 'blob'})