Angular 5中使用Papa.parse无法找到CSV文件的问题求助

咱们先把核心问题揪出来：路径拼接错误是导致404的主要原因，和IIS安全级别没关系，就是代码里的路径逻辑出了问题，再结合Angular项目的路径解析规则，咱们一步步解决：

1. 直接的路径错误 #

你写的URL模板是：

var url: string = "../../assets/assets/{0}/{1}/data.csv";

这里有两个明显的问题：

• 重复了assets：你的CSV实际存在src/assets/{tipus}/{nomClase}/data.csv，模板里却多写了一层assets，变成了assets/assets，这就指向了一个不存在的目录；
• 相对路径层级错了：data.service.ts在src/app目录下，从这个文件出发，../就能回到src目录，再指向assets就够了；而../../会直接跳出src目录，指向项目根目录（包含src、node_modules的那个目录），编译后的资源都在dist里，这个路径自然找不到文件。

修正路径模板 #

最稳妥的是用绝对路径（Angular编译后assets会放在dist根目录下）：

var url: string = "/assets/{0}/{1}/data.csv";

或者用正确的相对路径（相对于service文件）：

var url: string = "../assets/{0}/{1}/data.csv";

2. 更符合Angular风格的做法：先取文件内容再解析 #

Papa.parse的download: true模式是直接发起HTTP请求，但在Angular项目里，更推荐用Angular的Http服务先获取文件文本，再传给Papa.parse解析——这样能更好地结合Angular的异步流程，也能避开路径解析的坑：

public cargarFitxer(obj: any): Observable<any> {
  // 先修正路径模板
  var url: string = "/assets/{0}/{1}/data.csv";
  var clase: any = obj;
  var nomClase: string = clase.constructor.name.toLowerCase();
  var manteniments: string[] = [ "capcaleres", "idiomes", "llenguatgesprogramacio", "nivells", "posicions", "tipusempresa" ];
  var tipus = (manteniments.find(x => x === nomClase)) ? "manteniments" : "llogica";
  url = url.replace("{0}", tipus);
  url = url.replace("{1}", nomClase);

  // 用Http获取文件文本后再解析
  return this.http.get(url)
    .map((response: Response) => response.text())
    .map(csvText => {
      return this.papa.parse(csvText, {
        // 这里可以根据需求加解析参数，比如header: true（把第一行作为表头）
      });
    });
}

调用的时候订阅这个Observable就能处理解析后的结果，更符合Angular的RxJS异步模式。

3. 确认Angular CLI的Assets配置 #

你的angular-cli.json里已经配置了"assets": ["assets", ...]，这个是正确的——它会把src/assets下的所有文件复制到编译后的dist/assets目录，只要路径对，文件就能被访问到。

为什么单独访问URL能打开？ #

你单独访问的肯定是正确的路径（比如http://localhost:4200/assets/manteniments/capcaleres/data.csv），但代码里生成的是错误路径（比如http://localhost:4200/assets/assets/manteniments/capcaleres/data.csv），所以直接访问没问题，代码请求的错误路径就返回404了。

内容的提问来源于stack exchange，提问作者Dave