Angular 11使用pdfjs-dist生成PDF缩略图的报错问题求解

一、第一个编译报错不需要使用自定义builder #

第一个报错是pdfjs-dist 2.8+版本使用了ES2020可选链（?.）语法，Angular11默认不会转译node_modules依赖中的新语法导致的，有两种更简单的解决方案：

• 方案1：降级pdfjs-dist到适配版本
  直接卸载现有版本安装适配Angular11的2.7.x版本即可，执行以下命令：

  npm uninstall pdfjs-dist @types/pdfjs-dist
  npm install pdfjs-dist@2.7.570 @types/pdfjs-dist@2.7.4
  

  该版本未使用ES2020新语法，不会触发编译错误，也完全支持PDF第一页转图片的需求。
• 方案2：保留高版本pdfjs-dist，修改配置适配
  不需要自定义builder，仅修改两个配置文件即可：
  1. 在angular.json的项目build配置中添加允许CommonJS依赖的配置：

     "projects": {
       "你的项目名": {
         "architect": {
           "build": {
             "options": {
               "allowedCommonJsDependencies": ["pdfjs-dist"]
             }
           }
         }
       }
     }
     

  2. 在tsconfig.json中将编译目标调整为ES2020：

     {
       "compilerOptions": {
         "target": "ES2020"
       }
     }
     

二、"Cannot read property 'flags'"报错修复方案 #

该报错是你使用的自定义builder和Angular11的编译器版本不兼容导致的，修复方式如下：

• 如果你用第一种降级pdfjs-dist的方案，直接回退所有对builder的修改，使用Angular11默认的@angular-devkit/build-angular:browser builder即可，该错误会直接消失。
• 如果你必须使用自定义builder，需要安装和Angular11版本对齐的builder包：

  npm install @angular-builders/custom-webpack@11 @angular-builders/dev-server@11
  

  版本号和你的Angular核心版本保持一致即可解决版本不兼容问题。

附加：pdfjs-dist在Angular11中的正确引入方式 #

完成上述配置后，用以下方式引入pdfjs-dist即可正常生成PDF缩略图：

import * as pdfjsLib from 'pdfjs-dist';
// 配置worker路径，打包后如果加载失败可以把worker文件放到assets目录下修改路径即可
pdfjsLib.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.min.js';

// 生成第一页缩略图的示例代码
const pdf = await pdfjsLib.getDocument('你的PDF文件路径').promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
await page.render({ canvasContext: context, viewport: viewport }).promise;
// canvas.toDataURL() 即可得到第一页的图片地址

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