I use pdfjs with Angular 14
When i tried to use one of the functions it gave me error that The top-level-await experiment is not enabled :
import { Component, ElementRef, Input, OnInit, 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;
}
}
Error:
./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)
File was processed with these loaders:
* ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
* ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
I tried to use custom webpack config and change angular.json to procced with it. But it didnt help
extra-webpack.config.js
const path = require('path');
module.exports = {
experiments: {
topLevelAwait: true,
},
};