Angular 10 update serve/build error on browser "Cannot set property 'pdfjsLib' of undefined"

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x ] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

When updating from Angular 9 to 10, build or serve, on modules loading in browser breaks in error on ng2-pdf-viewer component

Error (browser console):

Uncaught TypeError: Cannot set property 'pdfjsLib' of undefined
    at webpackUniversalModuleDefinition (universalModuleDefinition:9)
    at Module.<anonymous> (universalModuleDefinition:1)
    at Module../node_modules/pdfjs-dist/build/pdf.js (vendor.js:703116)
    at __webpack_require__ (bootstrap:84)
    at Module../node_modules/ng2-pdf-viewer/__ivy_ngcc__/fesm2015/ng2-pdf-viewer.js (pdf-viewer.component.ts:37)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/shared/modules/document-file/components/document-file-preview/document-file-preview.component.ts (policy.model.ts:41)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/shared/modules/document-file/dialogs/dialog-document-file-editor/dialog-document-file-editor.component.ts (dialog-document-file-editor.component.ts:1)
    at __webpack_require__ (bootstrap:84)

Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//vendor
import { DevExtremeModule } from 'devextreme-angular';
import { MaterialModule } from 'src/app/shared/material.module';
import { PdfViewerModule } from 'ng2-pdf-viewer';
//app
import { DocumentFileComponent } from './document-file.component';

import {
	DocumentFileThumbnailComponent,
	DocumentFilePreviewComponent,
} from './components';

import {
	DialogDocumentFileCropComponent,
	DialogDocumentFileSplitComponent,
	DialogDocumentFileEditorComponent
} from './dialogs';

import { PipesModule } from 'src/app/shared/pipes/pipes.module';
import { DocumentFileTypeFieldComponent } from './components/document-file-type-field/document-file-type-field.component';

@NgModule({
	declarations: [
		DocumentFileComponent,
		DocumentFileThumbnailComponent,
		DocumentFilePreviewComponent,
		DocumentFileTypeFieldComponent,

		DialogDocumentFileCropComponent,
		DialogDocumentFileSplitComponent,
		DialogDocumentFileEditorComponent,
	],
	imports: [
		CommonModule,
		DevExtremeModule,
		MaterialModule,
		PdfViewerModule,
		PipesModule
	],
	exports: [
		DocumentFileComponent,
		DocumentFileThumbnailComponent,
		DocumentFilePreviewComponent,

		PdfViewerModule
	],
	entryComponents: [
		DialogDocumentFileCropComponent,
		DialogDocumentFileSplitComponent,
		DialogDocumentFileEditorComponent
	]
})
export class DocumentFileModule { }

Component:

import { Component, OnInit, ViewChild, Inject, Input, SimpleChanges, OnChanges } from '@angular/core';
import { PdfViewerComponent, PDFDocumentProxy } from 'ng2-pdf-viewer';
import { PdfOptions, DxToolbarItem } from 'src/app/shared/models';
import { BehaviorSubject, Subscription } from 'rxjs';
import { DxToolbarComponent } from 'devextreme-angular';

@Component({
	selector: 'app-document-file-preview',
	templateUrl: './document-file-preview.component.html',
	styleUrls: ['./document-file-preview.component.scss']
})
export class DocumentFilePreviewComponent implements OnInit, OnChanges {

	@ViewChild(PdfViewerComponent)
	pdf: PdfViewerComponent;

	@ViewChild(DxToolbarComponent, { static: true })
	dxToolbar: DxToolbarComponent;

	subscriptions: Subscription[] = [];

	//pdf options
	private PdfOptionsSubject: BehaviorSubject<PdfOptions>;
	get options(): PdfOptions {
		return this.PdfOptionsSubject.getValue();
	}

	@Input()
	blob: Blob;

	@Input()
	zoom?: number = 0.5;

	toolbarItems: DxToolbarItem[];
	private page: number = 1;

	constructor() { }

	ngOnInit() {

	}

	ngOnChanges(changes: SimpleChanges): void {
		//Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
		//Add '${implements OnChanges}' to the class.
		let options = new PdfOptions();
		let srcUrl = this.blob && window.URL.createObjectURL(this.blob) || '';

		this.PdfOptionsSubject = new BehaviorSubject<PdfOptions>(options);
		this.PdfOptionsSubject.next({
			...this.options,
			fitToPage: true,
			originalSize: false,
			showAll: false,
			zoom: this.zoom,
			src: srcUrl
		});

		this.PdfOptionsSubject.subscribe(options => {
			this.toolbarItems = [
				{
					location: "center", widget: 'dxButton', cssClass: 'p-0',
					options: {
						elementAttr: { class: 'text-white' }, icon: 'lnr lnr-frame-contract border rounded-circle', hint: 'Fit to view all', stylingMode: 'text',
						onClick: () => {
							this.PdfOptionsSubject.next({ ...this.options, fitToPage: true, originalSize: false, autoresize: false });
						}
					}
				},
				{
					location: 'center',
					widget: 'dxButton',
					//locateInMenu: 'auto',
					cssClass: 'p-0',
					options: {
						elementAttr: { class: 'text-white' },
						icon: 'lnr lnr-plus-circle',
						hint: 'Zoom In',
						stylingMode: 'text',
						onClick: () => {
							this.options.zoom = this.options.zoom * 1 + 0.1;
							this.PdfOptionsSubject.next({ ...this.options, zoom: this.options.zoom });
						}
					}
				},
				{
					location: 'center',
					widget: 'dxButton',
					//locateInMenu: 'auto',
					cssClass: 'p-0',
					options: {
						elementAttr: { class: 'text-white' },
						icon: 'lnr lnr-circle-minus',
						hint: 'Zoom Out',
						stylingMode: 'text',
						onClick: () => {
							this.options.zoom = this.options.zoom * 1 - 0.1;
							this.PdfOptionsSubject.next({ ...this.options, zoom: this.options.zoom });
						}
					}
				},

				//Pages & Page
				{
					visible: this.options.pages > 1,
					location: 'center',
					template: '|',
					cssClass: 'px-2 text-white'
				},

				{
					visible: this.options.pages > 1,
					location: 'center',
					widget: 'dxButton',
					cssClass: 'p-0',
					options: {
						elementAttr: { class: 'text-white' },
						icon: 'lnr lnr-arrow-up-circle',
						hint: 'Show previous page',
						stylingMode: 'text',
						disabled: this.page <= 1,
						onClick: () => {
							this.page = this.page - 1;
							if (this.page >= 1)
								this.PdfOptionsSubject.next({ ...this.options, page: this.page });
						}
					}
				},

				{
					visible: this.options.pages > 1,
					location: 'center',
					widget: 'dxButton',
					cssClass: 'p-0',
					options: {
						elementAttr: { class: 'text-white' },
						icon: 'lnr lnr-arrow-down-circle',
						hint: 'Show next page',
						stylingMode: 'text',
						disabled: this.page === this.options.pages,
						onClick: () => {
							this.page = this.page + 1;
							if (this.page <= this.options.pages)
								this.PdfOptionsSubject.next({ ...this.options, page: this.page });
						}
					}
				},
			];
		});
	}

	callBackFn($e: PDFDocumentProxy): void {
		this.PdfOptionsSubject.next({ ...this.options, pages: $e.numPages });
	}

	onError(error: any) {
		// do anything
		console.error(error)
	}

}

[Vitya11]

Updating “@angular-devkit/build-angular”: “^0.1000.4” to the latest version is solving the issue

[PedroS5499]

hy, i have some news. Im using last version of ng2-pdf-viewer 6.3.2

I forced downgrade version of angular, so rollback all angular packages and dependencies and still gave same error. Compared package.json to see what is different and found that, @angular-devkit/build-angular is what cause the issue there. If you force downgrade version of that angular package (build_angular) to 0.901.6 compile and works just fine. So i figured out that the issue is how build of angular compile all external vendor packages. Or you need to change something in ng2-pdf to make compatible with new version of @angular-devkit/build-angular.

I hope that helps @VadimDez