ngx-extended-pdf-viewer生产部署时加载viewer.ftl失败求助

问题概述 #

在Angular应用中使用ngx-extended-pdf-viewer展示PDF，本地运行完全正常，但部署到服务器后组件抛出大量错误，严重影响性能。通过浏览器开发者工具排查发现：组件请求的locale.json和P311N_file_name能正常获取，但viewer.ftl始终返回404 Not Found。

本地环境请求路径：http://localhost:4200/assets/locale/en-US/viewer.ftl（状态码304，正常）
部署环境请求路径：https://xyz.websites/assets/locale/en-US/viewer.ftl（状态码404，异常）

排查与解决步骤 #

1. 确认打包时文件被正确包含 #

打开项目根目录下的angular.json，找到build配置里的assets数组，确保包含了src/assets目录或者ngx-extended-pdf-viewer的assets资源。正确配置示例：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/ngx-extended-pdf-viewer/assets",
    "output": "/assets/"
  }
]

配置完成后重新执行打包命令（比如ng build --prod），检查生成的dist目录下是否存在assets/locale/en-US/viewer.ftl文件。

2. 检查服务器端文件存在性与权限 #

登录部署服务器，找到应用静态文件的存放目录，确认assets/locale/en-US/viewer.ftl文件已上传，且文件权限设置为服务器可读取（比如Linux下设置为644权限）。

3. 调整服务器静态文件访问规则（以Nginx为例） #

如果使用Nginx作为服务器，可能是服务器对.ftl后缀的文件有默认限制。修改Nginx配置文件，在对应location块中添加文件类型支持：

location /assets/ {
  root /path/to/your/app/dist;
  try_files $uri $uri/ =404;
  types {
    text/plain ftl;
  }
}

修改完成后重启Nginx服务，确保配置生效。

4. 手动指定组件资源路径（备选方案） #

如果部署路径存在子目录（比如应用部署在https://xyz.websites/myapp/下），可在组件初始化时手动设置资源路径：

import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer';

constructor() {
  // 根据实际部署路径调整，比如部署在子目录时设置为'/myapp/assets'
  pdfDefaultOptions.assetsFolder = '/assets';
}

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