Possible bug in httpclient when using the blob data type

Issue

After I started using the Angular 17 version and recommending the use of withFetch, the GET method that searches for BLOB stopped working. If you don't use withFetch, the PDF opens normally within my template's iframe. Note: No errors are displayed during compilation or at run time. The PDF is displayed with faulty content, showing strange texts and characters. What's wrong in the code below? Could it be a bug?

app.config.ts

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        provideHttpClient(
            withInterceptorsFromDi(),
            withFetch()
        ),   
...
}

services.ts

public downloadDiagrammedPdf(sumarioId: number, nomeDoDiagramaPDF: string): Observable<HttpEvent<Blob>> {
    return this.http.request(
      new HttpRequest('GET', `${this.apiDownloadPdfUrl}?sumarioId=${sumarioId}&nomeDoDiagramaPDF=${nomeDoDiagramaPDF}`, null, {
        reportProgress: true,
        responseType: 'blob',
      })
    );
  }

showPdf.componente.ts

downloadFile(sumarioId: number, nomeDoDiagramaPDF: string): void {
    this.serviceUpDown.downloadDiagrammedPdf(sumarioId, nomeDoDiagramaPDF).subscribe({
      next: (data) => {
        switch (data.type) {
          case HttpEventType.DownloadProgress:
            break;
          case HttpEventType.Response:
            //this.downloadStatus.emit({ status: ProgressStatusEnum.COMPLETE });
            const file = new Blob([data.body as BlobPart], {
              type: data.body?.type,
            });
            this.createPdfFromBlob(file);
            break;
        }
      },
      error: (err) => {
        //this.downloadStatus.emit({ status: ProgressStatusEnum.ERROR });
        if (err.status == 404) {
          this.router.navigate(['app-error-page']);
        }
        else
          console.log(err);

      },
      complete: () => { }
    });
  }

  createPdfFromBlob(file: Blob) {
    this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file));
  }

version:

{
    "@angular/animations": "^17.0.2",
    "@angular/cdk": "^17.0.0",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/forms": "^17.0.2",
    "@angular/material": "^17.0.0",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",
    "@angular/platform-server": "^17.0.2",
    "@angular/router": "^17.0.2",
    "@angular/ssr": "^17.0.0",
    "@auth0/angular-jwt": "^5.1.2",
    "@material/icon-button": "^15.0.0-canary.684e33d25.0",
    "angular-imask": "^7.1.3",
    "express": "^4.15.2",
    "ngx-toastr": "^17.0.2",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.2"
  }

Solution

This is indeed a bug, the mime type is missing in the blob.

Until a fix lands, you can workaround this issue by setting the type yourself on the blob !

  createPdfFromBlob(file: Blob) {
    file = file.slice(0, file.size, "application/pdf")
    this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file));
  }

PR to track: https://github.com/angular/angular/pull/52840

Answered By - Matthieu Riegler