Angular 14集成pdfjs报错：未启用top-level-await实验特性

问题背景 #

在Angular 14项目中集成pdfjs-dist时触发模块解析错误，提示需启用top-level-await实验特性。已尝试添加自定义webpack配置但未生效，相关代码及错误信息如下：

组件代码 #

import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { ImageItem, TextItem } from '../../models/item';
import * as pdfjsLib from 'pdfjs-dist';

@Component({
  selector: 'app-pdf-editor-view',
  templateUrl: './pdf-editor-view.component.html',
  styleUrls: ['./pdf-editor-view.component.scss']
})
export class PdfEditorViewComponent {

  @Input() textItems: TextItem[] = [];
  @Input() imageItems: ImageItem[] = [];

  name = 'Angular';
  private pdfDoc: any;
  @ViewChild('canvas', { static: true }) canvas!: ElementRef<HTMLCanvasElement>;
  ctx!: CanvasRenderingContext2D;

  pdfurl = "../../../../../Luxoft - Angular Advanced.pdf";

  constructor() { }

  async showPdf() {
    const loadingTask = pdfjsLib.getDocument(this.pdfurl);
    this.pdfDoc = await loadingTask.promise;
  }

}

自定义webpack配置（extra-webpack.config.js） #

const path = require('path');

module.exports = {
    experiments: {
      topLevelAwait: true,
    },
};

错误信息 #

./node_modules/pdfjs-dist/build/pdf.mjs - Error: Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
处理该文件的加载器：

• ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
• ./node_modules/source-map-loader/dist/cjs.js
  可能需要额外加载器处理结果。

解决方案 #

方案1：正确集成自定义webpack配置 #

Angular默认不会自动读取自定义webpack配置，需借助@angular-builders/custom-webpack工具实现：

1. 安装依赖

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json配置
   找到项目的architect.build和architect.serve节点，替换builder并指定自定义配置路径：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 保留原有build配置项
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 保留原有serve配置项
    }
  }
}

3. 重启开发服务器

ng serve

方案2：降级pdfjs-dist到兼容版本 #

高版本pdfjs-dist依赖top-level-await，可降级到无此依赖的3.x版本：

1. 卸载当前版本

npm uninstall pdfjs-dist

2. 安装指定兼容版本

npm install pdfjs-dist@3.11.174 --save

方案3：使用UMD格式的pdfjs-dist #

直接引入UMD版本文件规避ES模块的top-level-await问题：

1. 修改组件导入路径

import * as pdfjsLib from 'pdfjs-dist/build/pdf.umd';

2. （可选）指定UMD版本的worker

pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.umd.js';

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