如何在Angular中使用HttpClient从assets下载文件？

Question

根据类似问题的之前回答，如这个，从资产目录下载或者读取文件应该是使用 HttpClient 的 get 方法直接调用。例如，如果我有一个 DownloadService，我可以简单地定义它为：

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

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

}

然而，当我使用ng serve测试时，我收到一个错误提示，说/assets/path/to/file.ext不是有效的URL。我尝试过./assets/path/to/file.ext和assets/path/to/file.ext，但我得到了相同的错误。我需要在运行时配置一些东西才能使其正常工作，还是自从那些答案被写出以来就已经改变了？我正在使用 Angular 9。

- Psycho Punch

---

你在控制台输出了响应吗？具体内容是什么？ - Hien Nguyen

我认为它甚至没有达到我可以处理响应的地步，因为它在尝试执行请求之前就拒绝了URL。 - Psycho Punch

Answer 1

无法获取 JSON 以外的内容时会出现这个错误。要解决它，请根据需要定义 responseType。例如：

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

请注意我已经更改了URL，应该是./assets/foo.bar。

这里有一个可工作的示例：https://stackblitz.com/edit/angular-9-starter-l1cn5j。只需检查控制台即可。

顺便提一下，这些是responseType接受的类型：

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

- guzmanoj

Answer 2

我发现我遇到的问题是由于自定义HTTP拦截器假设所有URL都是有效的URL（文件路径不是）。为解决这个问题，我最终修改了拦截器来忽略无效的URL。使用HttpClient的get获取资产下载就像描述的那样运作良好。

- Psycho Punch