javascript - How to download files from assets using HttpClient in Angular? - Stack Overflow

admin管理员组

文章数量:1415100

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.

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.

• javascript
• angular

Share Improve this question Follow asked Jul 22, 2020 at 14:47 Psycho PunchPsycho Punch 6,9321212 gold badges5858 silver badges9191 bronze badges 2

• did you console response? what is exact content? – Hien Nguyen Commented Jul 22, 2020 at 14:55
• 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 Commented Jul 22, 2020 at 14:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./edit/angular-9-starter-l1cn5j

Just check the console :)

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

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

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.

本文标签： javascriptHow to download files from assets using HttpClient in AngularStack Overflow