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

[PedroS5499]

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)
    }

}

[sombraSoft]

same here :(

[LucasKubicki]

Same any news ?

[VadimDez]

What version of ng2-pdf-viewer are you using?

[LucasKubicki]

Last, but it's work on version 6.1.2

[Vitya11]

What version of ng2-pdf-viewer are you using? I have the same issue on 6.3.2 version

[Vitya11]

Downgrading to version 4.1.2 helps

[JoseRFJuniorLLMs]

https://stackblitz.com/edit/ng2-pdf-viewer-u1sbr7?file=package.json

{ "name": "angular", "version": "0.0.0", "private": true, "dependencies": { "@angular/animations": "10.0.2", "@angular/common": "10.0.2", "@angular/compiler": "10.0.2", "@angular/core": "10.0.2", "@angular/forms": "10.0.2", "@angular/platform-browser": "10.0.2", "@angular/platform-browser-dynamic": "10.0.2", "@angular/router": "10.0.2", "@types/pdfjs-dist": "2.0.1", "core-js": "2.6.9", "ng2-pdf-viewer": "^6.3.2", "rxjs": "6.5.2", "url": "^0.11.0", "webpack": "4.39.0", "zone.js": "0.9.1" }, "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "devDependencies": { "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "~7.0.2", "@angular/compiler-cli": "~7.0.0", "@angular/language-service": "~7.0.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.1" } }

[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

[JoseRFJuniorLLMs]

{ "name": "comau", "version": "1.1.0", "description": "comau", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" }, "repository": { "type": "git", "url": "" }, "keywords": [ "angular dashboard", "angular admin", "angular bootstrap admin", "angular bootstrap dashboard", "angular panel", "angular bootstrap template", "angular admin template", "angular free", "angular free dashboard", "angular free bootstrap dashboard", "free admin template", "angular admin", "angular admin panel", "angular dashboard", "angular dashboard free", "angular admin free", "angular free admin panel", "angular freebie", "angular freebie dashboard", "angular freebie bootstrap dashboard", "freebie admin template", "angular dashboard freebie", "angular admin freebie", "angular freebie admin panel", "creative tim", "web dashboard", "bootstrap 4 dashboard", "bootstrap 4", "css3 dashboard", "bootstrap 4 admin", "black dashboard bootstrap 4", "frontend", "responsive bootstrap 4 dashboard", "free dashboard", " free admin dashboard", "free bootstrap 4 admin dashboard" ], "author": "", "license": "", "bugs": { "url": "" }, "homepage": "", "private": false, "dependencies": { "@angular/animations": "~10.0.3", "@angular/cdk": "10.0.1", "@angular/common": "~10.0.3", "@angular/compiler": "~10.0.3", "@angular/core": "~10.0.3", "@angular/forms": "~10.0.3", "@angular/localize": "^10.0.3", "@angular/material": "10.0.1", "@angular/platform-browser": "~10.0.3", "@angular/platform-browser-dynamic": "~10.0.3", "@angular/platform-server": "^10.0.3", "@angular/router": "~10.0.3", "@ng-bootstrap/ng-bootstrap": "7.0.0", "@sweetalert2/ngx-sweetalert2": "^8.1.1", "angular-material-icons": "^0.7.1", "bootstrap": "4.5.0", "bootstrap-material-design": "4.1.3", "bootstrap-notify": "3.1.3", "chart.js": "2.9.3", "classlist.js": "^1.1.20150312", "ngx-extended-pdf-viewer": "^4.0.2", "ngx-markdown": "^10.0.0", "ngx-perfect-scrollbar": "^9.0.0", "ngx-toastr": "10.0.4", "perfect-scrollbar": "^1.5.0", "prismjs": "^1.20.0", "rxjs": "~6.6.0", "rxjs-compat": "6.6.0", "sweetalert2": "^9.15.3", "tslib": "^2.0.0", "web-animations-js": "^2.3.2", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "0.901.6", "@angular-devkit/schematics": "^9.1.11", "@angular/cli": "10.0.2", "@angular/compiler-cli": "10.0.3", "@angular/language-service": "^10.0.3", "@types/jasmine": "3.5.11", "@types/jasminewd2": "2.0.8", "@types/node": "14.0.23", "codelyzer": "6.0.0", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "5.0.2", "karma": "5.1.0", "karma-chrome-launcher": "3.1.0", "karma-coverage-istanbul-reporter": "3.0.3", "karma-jasmine": "3.3.1", "karma-jasmine-html-reporter": "1.5.4", "protractor": "7.0.0", "ts-node": "8.10.2", "tslint": "6.1.2", "typescript": "3.9.6" } }

[Vitya11]

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

[PedroS5499]

Updating @angular-devkit/build-angular to @latest = 0.1000.5 or @next = 0.1001.0-next.3 solving the issue.