Angular 5.2.2无法访问运行时生成的PDF文件，求解决方案

这个问题我之前升级Angular版本时也踩过同款坑——Angular CLI在构建过程中，只会把assets目录里编译时已存在的文件打包到最终的dist输出目录。Angular 4时可能默认保留了整个assets目录结构，不管里面有没有文件，但Angular 5的CLI优化了打包逻辑，只复制实际存在的文件，所以运行时新增的PDF自然就找不到了。下面给你几个靠谱的解决思路：

1. 修改.angular-cli.json的Assets配置，强制保留目录结构 #

这是最直接的适配方案，让CLI在构建时固定保留你的PDF目录，不管里面初始有没有文件：

• 打开项目根目录的.angular-cli.json文件
• 找到apps数组下的assets字段，把你的PDF目录路径添加进去：

  "apps": [
    {
      // ...其他配置项
      "assets": [
        "assets",
        "favicon.ico",
        "assets/files/pdf" // 新增这一行，指定要保留的目录
      ]
    }
  ]
  

  配置完成后重新构建项目，CLI会确保dist/assets/files/pdf目录存在，后续运行时生成的PDF放到这里，就能通过你原来的URL正常访问了。

2. 把运行时文件放到服务器独立的静态目录（推荐生产环境） #

其实assets目录本质是给编译时就确定的静态资源用的，运行时动态生成的文件更适合放在服务器的独立静态文件目录下：

• 比如在服务器上，和Angular的dist目录同级创建generated-pdfs目录，配置服务器把/pdfs路径映射到这个目录
• 后端生成PDF时，直接写入generated-pdfs目录
• Angular里访问PDF的URL改成http://localhost:4200/pdfs/3ff6d9d5-f433-4706-b928-b7da9a72a3ed.pdf
  这种方式完全绕开了Angular CLI的打包限制，服务器直接处理静态文件请求，稳定性更高，适合生产环境使用。

3. 开发环境用代理转发请求 #

如果只是开发环境遇到这个问题，可以通过Angular CLI的代理配置，把PDF请求转发到后端的文件存储地址：

• 项目根目录创建proxy.conf.json文件，内容如下：

  {
    "/assets/files/pdf/*": {
      "target": "http://localhost:3000", // 你的后端服务地址
      "pathRewrite": {"^/assets/files/pdf" : "/your-backend-pdf-path"},
      "changeOrigin": true
    }
  }
  

• 启动开发服务器时加上代理参数：

  ng serve --proxy-config proxy.conf.json
  

  这样开发环境下访问/assets/files/pdf/xxx.pdf时，请求会被转发到后端对应的路径，获取运行时生成的文件。

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