解决Angular中ng2-pdf-viewer命名导出导入失败的报错问题

环境信息 #

• NodeJs v16.18.1
• Npm v8.19.2
• Angular Cli 11.2.13
• Ubuntu Linux x64

操作步骤 #

已在app.module.ts中导入模块：

import { PdfViewerModule } from 'ng2-pdf-viewer';

imports: [
    PdfViewerModule,
]

报错信息 #

Error: ./node_modules/ng2-pdf-viewer/fesm2015/ng2-pdf-viewer.mjs 194:29-49
Can't import the named export 'VerbosityLevel' from non EcmaScript module (only default export is available)

Error: ./node_modules/ng2-pdf-viewer/fesm2015/ng2-pdf-viewer.mjs 791:12-21
Can't import the named export 'ViewChild' from non EcmaScript module (only default export is available)

Error: ./node_modules/ng2-pdf-viewer/fesm2015/ng2-pdf-viewer.mjs 690:39-51
Can't import the named export 'debounceTime' from non EcmaScript module (only default export is available)

已尝试的无效方案 #

• 删除node_modules后执行npm install
• 删除package-lock.json后执行npm install
• 使用npm cache clean清理npm缓存
• 尝试以import * as PdfViewerModule from 'ng2-pdf-viewer';方式导入模块
• 尝试Stack Overflow上的指定解决方案
• 改用ngx-extended-pdf-viewer包替代

问题 #

请问问题出在哪里？

核心原因 #

这是版本兼容性不匹配导致的：

• ng2-pdf-viewer新版本采用ES模块命名导出语法，但你的Angular 11对应的Webpack版本较低，对.mjs模块的处理存在缺陷，无法正确识别非ES模块的命名导出逻辑。
• Node.js 16虽支持ES模块，但Angular 11的构建链未完全适配这种新模块格式的导入规则。

具体解决方案 #

1. 降级ng2-pdf-viewer到兼容Angular 11的版本
   Angular 11对应的ng2-pdf-viewer兼容版本为^8.0.0，执行以下命令安装：

   npm install ng2-pdf-viewer@8.0.0 --save
   

   该版本采用旧模块格式，不会触发Webpack的导出识别错误。

2. 修改Angular构建配置，强制适配模块导入
   在angular.json的build配置中添加allowedCommonJsDependencies：

   "build": {
     "builder": "@angular-devkit/build-angular:browser",
     "options": {
       // 其他原有配置...
       "allowedCommonJsDependencies": [
         "ng2-pdf-viewer",
         "pdfjs-dist"
       ]
     }
   }
   

   同时在tsconfig.json的compilerOptions中添加：

   "compilerOptions": {
     // 其他原有配置...
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true
   }
   

   此配置让Webpack正确处理该包的导入逻辑。

3. 升级Angular版本（可选但推荐）
   若项目允许，升级到Angular 12+版本，新版本Webpack对ES模块支持更完善，可从根本解决这类兼容性问题。升级命令参考：

   ng update @angular/cli@12 @angular/core@12
   

   升级前请备份项目，提前处理可能的依赖冲突。

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