Angular 19 + ngx-extended-pdf-viewer: Dynamically loaded PDFs fail to render but work with...

I'm using Angular 19 and "ngx-extended-pdf-viewer": "^23.3.1". I'm trying load PDF file dynamically. I have sample webApiService with method:

public getFile(): Observable<Blob> {
return this.httpClient.get('/assets/ESD Nederlandrev.pdf', {
responseType: 'blob'
});
}


Here's my component: html:

<ngx-extended-pdf-viewer [src]="src" [textLayer]="true" [showHandToolButton]="true" [showPrintButton]="false"></ngx-extended-pdf-viewer>


And .ts:

@Component({
selector: 'app-example-pdf-viewer',
templateUrl: './example-pdf-viewer.component.html',
styleUrls: ['./example-pdf-viewer.component.css'],
standalone: true,
imports: [NgxExtendedPdfViewerModule],
providers: [NgxExtendedPdfViewerService],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExamplePdfViewerComponent {
public src: string | Blob = '/assets/1.pdf';
constructor(private pdfService: NgxExtendedPdfViewerService, private webApi: WebApiService) {
webApi.getFile().subscribe((res) => {
this.src = res;
});
}
}


Problem:

When I load the PDF dynamically (via the getFile() method), I sometimes get the error: "Incorrect or damaged PDF file." with message: 'Invalid Root reference.' For another file (from the ngx-extended-pdf-viewer samples), I get: "Unknown block type in flate stream."

However, if I remove the subscription and set the src statically like this:

public src: string | Blob = '/assets/ESD Nederlandrev.pdf';


the same files display correctly, with no errors.

I found this Issue: https://github.com/mozilla/pdf.js/issues/15257 but these pdfs are correctly displayed in all programs(Adobe, browsers etc.) and even displayed it I set its path statically.

What I've tried:

At the start I tried to pass this file from backed:

var group = app.MapGroup("/api");
group.MapGet("/getpdf", () =>
{
var path = Directory.GetCurrentDirectory();
var file = Path.Combine(path, "Asserts\\ESD Nederlandrev.pdf");

if (!System.IO.File.Exists(file))
{
return Results.BadRequest("File not found");
}
return Results.File(file, "application/pdf", "1.pdf");
})
.WithOpenApi();


and my webservice:

public getFile(): Observable<Blob> {
let endpoint = "getpdf";
let url = `${environment.apiUrl}/api/${endpoint}`;
return this.httpClient.get(url, {
responseType: 'blob'
});
}

• 
  Using URL.createObjectURL(res):
  
  webApi.getFile().subscribe((res) => { this.src = URL.createObjectURL(res); });
  
  
• 
  Using the FileReader and base64Src approach from the official guide
  

Nothing worked.

Observation When I start project with watch it tells me incorrect pdf etc. on /assets/ESD Nederlandrev.pdf loading. and nohing displayed. Then I change something in code that causes error (in my case I just changed httpClient to httpClient1) save. In shows an error in the back (to httpClient) save and /assets/ESD Nederlandrev.pdf is displayed correctly.

What am I missing? Why does the same file fail to render as a Blob but works perfectly when provided as a static path?

I'm still new to frontend development, so it's possible I'm overlooking something obvious.

Continue reading...