使用ng2-pdf-viewer加载项目assets目录本地PDF失败求助

1. 确认Angular资源打包配置 #

打开项目根目录的angular.json，找到assets配置数组，必须确保src/assets被包含在内，示例配置如下：

"assets": [
  "src/favicon.ico",
  "src/assets"
],

若未配置该项，Angular打包时不会将assets目录下的文件复制到dist目录，导致文件无法被访问。

2. 修正路径写法 #

组件模板中无需添加../前缀，直接使用根路径映射的assets/TemplatePDFHonos.pdf即可：

• HTML模板代码：

<pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;"></pdf-viewer>

• 对应TS代码：

pdfSrc = 'assets/TemplatePDFHonos.pdf';

3. 验证文件可访问性 #

• 确认src/assets/TemplatePDFHonos.pdf文件真实存在，文件名大小写完全匹配（Windows不区分大小写，但部署到Linux环境会严格区分）。
• 启动项目后，在浏览器地址栏直接访问http://localhost:4200/assets/TemplatePDFHonos.pdf，若能正常打开/下载，说明路径配置无误；若返回404，回到第一步检查assets配置。

4. 匹配依赖版本兼容性 #

Angular 10需搭配适配的ng2-pdf-viewer版本，建议安装7.x系列稳定版：

npm install ng2-pdf-viewer@7.x --save

过高版本可能存在Angular版本不兼容问题。

5. 查看浏览器控制台错误 #

按下F12打开开发者工具，切换到Console标签页排查具体错误：

• 若出现CORS相关错误：本地开发场景罕见，可检查是否配置了特殊代理规则。
• 若出现PDF.js相关错误：执行npm install重新安装依赖，确保依赖包完整。

6. 检查组件变量可见性 #

确保TS代码中pdfSrc变量为公共属性（Angular组件类属性默认public），避免因private修饰导致模板无法读取。

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