如何解决Ionic5集成@pdftron/pdfjs-express打开PDF时的lib/ui/index.html路由匹配错误

错误本质：Cannot match any routes. URL Segment: 'lib/ui/index.html' 并不是路由配置真的缺失，而是 WebViewer 初始化时的相对资源路径被 Angular/Ionic 的前端路由系统拦截，把对静态资源的请求当成了页面路由跳转，最终因为匹配不到对应路由抛出错误。

核心修正步骤 #

1. 调整 WebViewer 静态资源的引用路径 #

• 原代码中 path: '../lib'、initialDoc: '../files/xxx.pdf' 这类相对路径，在 SPA 动态路由环境下会随当前页面路径动态解析，极易触发路由拦截，需要改成指向项目静态资源目录的可访问路径。
• 手动将 @pdftron/pdfjs-express 安装包内的 lib 目录，整体拷贝到 Ionic 项目的 src/assets 目录下，形成 src/assets/lib 的目录结构；同时将待预览的 PDF 文件放到 src/assets/files 目录下。

2. 更新组件内的初始化配置 #

将 app.component.ts 中 WebViewer 的参数替换为正确的静态资源路径：

WebViewer({
  // 指向assets目录下的pdftron静态资源，避免被路由拦截
  path: '/assets/lib',
  initialDoc: '/assets/files/webviewer-demo-annotated.pdf'
}, this.viewer.nativeElement).then(instance => {
  this.wvInstance = instance;
})

3. 配置自动化的静态资源拷贝规则（可选） #

如果不想每次依赖版本更新都手动拷贝 lib 目录，可以在 angular.json 的构建配置中新增静态资源映射规则：

• 找到 architect.build.options.assets 数组，新增如下配置，让构建流程自动将 node_modules 中的 pdftron 资源输出到可访问的静态路径：

{
  "glob": "**/*",
  "input": "node_modules/@pdftron/pdfjs-express/lib",
  "output": "./assets/lib"
}

4. 补充路由白名单配置 #

• 确认项目的路由守卫、自定义路由拦截规则中，将 /assets/** 路径加入放行白名单，不要拦截对静态资源的请求。
• 如果项目部署在非根域名的子路径下，可以结合项目的 baseHref 配置，将 path 调整为匹配子路径的相对地址，避免静态资源访问异常。

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