How to download files from assets using HttpClient in Angular?

Question

Based on previous answers to similar questions such as this one, downloading, or in general, reading files from the assets directory should be a straightforward call to HttpClient's get method. For example if I have a DownloadService, I could simply define it as:

export class DownloadService {
    
  constructor(http: HttpClient){}

  download(data) {
    this.http.get('/assets/path/to/file.ext').subscribe(res => process(res));
  }

}

However, when I test this using ng serve, I get an error saying that /assets/path/to/file.ext is not a valid URL. I tried ./assets/path/to/file.ext, and assets/path/to/file.ext but I got the same error. Do I need to configure something in the runtime to get this working properly, or has this changed since those answers were written? I'm using Angular 9.

I don't think it even gets to the point where I could process the response because it rejects the URL before it even attempts to execute the request. — Psycho Punch, Jul 22 '20 at 14:58

WSD · Answer 1 · 2022-09-01T14:24:44.360

This error occurs whenever you try to fetch something different than a JSON. To fix it, please define the responseType accordingly. For example

this.http.get('./assets/path/to/file.txt', {responseType: 'text'}).subscribe(res => process(res));

Also, please notice how I've changed the URL, it should be ./assets/foo.bar

Here's a working example https://stackblitz.com/edit/angular-9-starter-l1cn5j

Just check the console :)

By the way, these are the accepted types for responseType:

responseType: 'arraybuffer'|'blob'|'json'|'text'

score -1 · Answer 2 · answered Jul 23 '20 at 09:08

I found out that the issue I was experiencing was due to a custom HTTP interceptor that assumes all URLs are valid URLs (file paths aren't). What I ended up doing to address this was to modify the interceptor to ignore URLs that are not valid.

Getting the asset to download using HttpClient's get works as described.

How to download files from assets using HttpClient in Angular?

2 Answers2