Unable to show PDF

[mingli1015]

Hi,

I have integrated successfully ngx-extended-pdf-viewer in our application (angular 11) three months ago. But today I suddenly found the PDF does not render in the browser, without errors.
I'm testing with the simple example with a local pdf file, there are no changes.
ngx-extended-pdf-viewer@10.5.0

<ngx-extended-pdf-viewer [src]="'assets/example.pdf'" useBrowserLocale="true" height="80vh"></ngx-extended-pdf-viewer>

[stephanrauh]

I feel you! But I'm also puzzled. Something must have changed. The screenshot indicates something goes wrong during the initialization phase of the PDF viewer. That's all I can say with so little information at hand.

Please keep me in the loop. When you manage to solve the bug, I want to know, and if you've got additional insight that might help me to help you, I want you to tell me, too!

Best regards + good luck
Stephan

[mingli1015]

Hello Stephan,

I have removed node_modules repository, reinstall pdf-viewer with "npm i ngx-extended-pdf-viewer --save". I got the last version 11.0.0-alpha.13.
I have also add NgxExtendedPdfViewerModule in my module file app.module.ts with "import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';"

But I get a lot of errers

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.m
js 7384:6-15
Can't import the named export '??text' from non EcmaScript module (only default
export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.m
js 83:4-25
Can't import the named export '??textInterpolate1' from non EcmaScript module (o
nly default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.m
js 637:4-25
Can't import the named export '??textInterpolate1' from non EcmaScript module (o
nly default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.m
js 1663:6-20
Can't import the named export '??viewQuery' from non EcmaScript module (only def
ault export is available)

[stephanrauh]

Looks like you've got a problem with the *.mjs files. Unfortunately, I've got a bad headache tonight, so I can't dive deep into it, but maybe this article helps you to find out what's going on: https://medium.com/passpill-project/files-with-mjs-extension-for-javascript-modules-ced195d7c84a

[stephanrauh]

BTW, which browser are you using? Is is something that happens on certain browsers only?

[mingli1015]

We are using Chrome. I can't find more solutions for the problem of .mjs files. I have tried to roll back to 10.5.0, 10.0.0 and 9.5.0, but nothing changed, without errers, no PDF display and all the buttons on pdf viewer don't work. I give you more information about our project, let me know if you can fix the problem. Thank you very much.

package.json

{
    "dependencies": {
        "@angular/animations": "11.2.13",
        "@angular/cdk": "11.2.12",
        "@angular/common": "11.2.13",
        "@angular/compiler": "11.2.13",
        "@angular/core": "11.2.13",
        "@angular/elements": "11.2.13",
        "@angular/forms": "11.2.13",
        "@angular/material": "11.2.13",
        "@angular/platform-browser": "11.2.13",
        "@angular/platform-browser-dynamic": "11.2.13",
        "@angular/platform-server": "11.2.13",
        "@angular/pwa": "^0.1102.12",
        "@angular/router": "11.2.13",
        "@angular/service-worker": "11.2.13",
        "@angularclass/hmr": "^3.0.0",
        "@fortawesome/angular-fontawesome": "^0.8.2",
        "@fortawesome/fontawesome-free": "^5.15.3",
        "@fortawesome/fontawesome-svg-core": "^1.2.35",
        "@fortawesome/free-solid-svg-icons": "^5.15.3",
        "@fullcalendar/bootstrap": "^5.6.0",
        "@fullcalendar/core": "^5.6.0",
        "@fullcalendar/daygrid": "^5.6.0",
        "@fullcalendar/interaction": "^5.6.0",
        "@fullcalendar/list": "^5.6.0",
        "@fullcalendar/moment": "^5.6.0",
        "@fullcalendar/moment-timezone": "^5.6.0",
        "@fullcalendar/timegrid": "^5.6.0",
        "@fullcalendar/timeline": "^5.6.0",
        "@microsoft/signalr": "^5.0.5",
        "@microsoft/signalr-protocol-msgpack": "^5.0.5",
        "@ng-state/immer-data-strategy": "^1.7.5",
        "@ng-state/store": "^6.8.11",
        "@ngtools/webpack": "^11.2.12",
        "@popperjs/core": "^2.9.2",
        "@ungap/custom-elements": "^0.1.15",
        "aes": "^0.1.0",
        "angular-froala-wysiwyg": "3.2.6-1",
        "angular2-uuid": "^1.1.1",
        "base-64": "^1.0.0",
        "chart.js": "^3.2.1",
        "crypto": "^1.0.1",
        "crypto-js": "^4.0.0",
        "csv": "^5.5.0",
        "deep-equal": "^2.0.5",
        "diacritics": "^1.3.0",
        "dripicons": "^2.0.0",
        "file-saver": "^2.0.5",
        "font-awesome": "^4.7.0",
        "foundation-icon-fonts": "^0.1.1",
        "froala-editor": "^3.2.6-1",
        "fullcalendar": "^5.6.0",
        "fullcalendar-scheduler": "^5.6.0",
        "hammerjs": "^2.0.8",
        "immer": "^9.0.6",
        "ionicons": "^4.6.3",
        "jquery": "^3.6.0",
        "luxon": "^1.26.0",
        "material-design-icons": "^3.0.1",
        "moment": "^2.29.1",
        "ngx-drag-scroll": "^11.0.0-beta.1",
        "ngx-export-as": "1.5.0",
        "ngx-extended-pdf-viewer": "10.5.0",
        "ngx-papaparse": "^5.0.0",
        "primeflex": "^2.0.0",
        "primeicons": "^4.1.0",
        "primeng": "^11.4.1",
        "quill": "^1.3.7",
        "rxjs": "^6.6.7",
        "tar-pack": "^3.4.1",
        "tether": "^1.4.7",
        "tsdoc": "0.0.4",
        "tslib": "^2.2.0",
        "typescript-linq": "^1.0.6",
        "web-animations-js": "^2.3.2",
        "xlsx": "^0.17.4",
        "zone.js": "^0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.1102.12",
        "@angular-devkit/schematics": "^11.2.12",
        "@angular/cli": "11.2.12",
        "@angular/compiler-cli": "11.2.13",
        "@angular/language-service": "11.2.13",
        "@angular/localize": "11.2.13",
        "@babel/plugin-proposal-class-properties": "^7.13.0",
        "@rmp135/sql-ts": "^1.8.2",
        "@schematics/angular": "^11.2.12",
        "@schematics/package-update": "^0.7.5",
        "@types/angular": "^1.8.1",
        "@types/angular-material": "^1.1.72",
        "@types/base-64": "^1.0.0",
        "@types/bootstrap": "^5.0.13",
        "@types/crypto-js": "^4.0.1",
        "@types/deep-equal": "^1.0.1",
        "@types/diacritics": "^1.3.1",
        "@types/file-saver": "2.0.4",
        "@types/hammerjs": "^2.0.39",
        "@types/jasmine": "^3.6.11",
        "@types/jasminewd2": "^2.0.8",
        "@types/jquery": "^3.5.5",
        "@types/luxon": "^1.26.5",
        "@types/modernizr": "^3.5.3",
        "@types/mssql": "^6.0.8",
        "@types/node": "15.0.2",
        "@types/rx": "^4.1.2",
        "@types/rx-core": "^4.0.3",
        "@types/rx-core-binding": "^4.0.4",
        "@types/uuid": "^8.3.0",
        "@types/xlsx": "0.0.36",
        "@typescript-eslint/eslint-plugin": "^4.22.1",
        "@typescript-eslint/parser": "^4.22.1",
        "@typescript-eslint/typescript-estree": "^4.22.1",
        "acorn-dynamic-import": "^4.0.0",
        "ajv": "^8.2.0",
        "codelyzer": "^6.0.2",
        "compass": "^0.1.1",
        "concurrently": "^6.0.2",
        "eslint": "^7.25.0",
        "eslint-import-resolver-ts": "^0.4.2",
        "eslint-plugin-angular": "^4.0.1",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-rxjs-angular": "^1.0.6",
        "glob": "^7.1.6",
        "jasmine": "^3.7.0",
        "jasmine-core": "~3.7.1",
        "jasmine-spec-reporter": "~7.0.0",
        "json-schema-to-typescript": "^10.1.4",
        "karma": "~6.3.2",
        "karma-chrome-launcher": "~3.1.0",
        "karma-cli": "~2.0.0",
        "karma-coverage-istanbul-reporter": "~3.0.3",
        "karma-jasmine": "~4.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "mssql": "^6.3.2",
        "protractor": "~7.0.0",
        "sass": "^1.32.12",
        "sync-files": "^1.0.3",
        "ts-loader": "^9.1.2",
        "ts-node": "~9.1.1",
        "typescript": "4.0.7"
    },
    "license": "MIT",
    "name": "gunto",
    "private": true,
    "scripts": {
        "start": "ng serve --live-reload --watch --open",
        "startdev": "ng serve --live-reload --watch --open --configuration dev",
        "cleanup": "node .cleanuprc.js",
        "postinstall": "ngcc --tsconfig ./src/tsconfig.prod.json",
        "eslint": "eslint \"./src/**/*.ts\"",
        "publish": "node --version && node .stylerc.js && node -e \"console.log('--------------------'); \" && node .compilerc.js",
        "ngcc": "ngcc",
        "ng": "ng",
        "compile": "node .compilerc.js",
        "style": "node .stylerc.js"
    },
    "version": "1.4.26",
    "-vs-binding": {
        "ProjectOpened": [
            "cleanup",
            "install"
        ]
    },
    "resolutions": {
        "webpack": "5.4.0"
    }
}

angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "gunto_scripts": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "schematics": {
                "@schematics/angular:class": {
                    "skipTests": true
                },
                "@schematics/angular:component": {
                    "skipTests": true
                },
                "@schematics/angular:directive": {
                    "skipTests": true
                },
                "@schematics/angular:module": {
                    "skipTests": true
                },
                "@schematics/angular:pipe": {
                    "skipTests": true
                },
                "@schematics/angular:service": {
                    "skipTests": true
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "../WebSite/wwwroot",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "polyfills": "src/polyfills.ts",
                        "namedChunks": false,
                        "vendorChunk": false,
                        "commonChunk": false,
                        "sourceMap": true,
                        "verbose": false,
                        "serviceWorker": false,
                        "aot": true,
                        "assets": [
                            "src/assets",
                            "src/favicon.ico",
                            "src/manifest.json",
                            {
                                "glob": "**/*",
                                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
                                "output": "/assets/"
                            }
                        ],
                        "styles": [
                            "node_modules/primeflex/primeflex.css",
                            "node_modules/primeng/resources/themes/saga-blue/theme.css",
                            "node_modules/primeng/resources/primeng.min.css",
                            "node_modules/primeicons/primeicons.css",
                            "node_modules/@fortawesome/fontawesome-free/css/all.css",
                            "node_modules/foundation-icon-fonts/foundation-icons.css",
                            "node_modules/ionicons/dist/css/ionicons.css",
                            "node_modules/material-design-icons/iconfont/material-icons.css",
                            "node_modules/dripicons/webfont/webfont.css",
                            "node_modules/quill/dist/quill.snow.css",
                            "node_modules/fullcalendar/main.min.css",
                            "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
                            "node_modules/froala-editor/css/froala_style.min.css",
                            "src/styles/default.scss"
                        ],
                        "scripts": [
                            "node_modules/chart.js/dist/Chart.min.js",
                            "node_modules/@ungap/custom-elements/min.js",
                            "node_modules/quill/dist/quill.min.js",
                            "node_modules/moment/moment.js",
                            "node_modules/fullcalendar/main.min.js",
                            "node_modules/froala-editor/js/froala_editor.pkgd.min.js",
                            "node_modules/froala-editor/js/languages/fr.js",
                            "node_modules/froala-editor/js/languages/en_gb.js",
                            "node_modules/froala-editor/js/languages/de.js",
                            "node_modules/froala-editor/js/languages/it.js",
                            "node_modules/xlsx/dist/xlsx.full.min.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "optimization": false,
                            "outputHashing": "bundles",
                            "tsConfig": "src/tsconfig.prod.json",
                            "sourceMap": true,
                            "verbose": false,
                            "progress": false,
                            "namedChunks": false,
                            "vendorChunk": false,
                            "commonChunk": false,
                            "aot": true,
                            "extractLicenses": true,
                            "buildOptimizer": false,
                            "serviceWorker": false,
                            "ngswConfigPath": "./ngsw-config.json",
                            "outputPath": "../WebSite/wwwroot/",
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "budgets": [
                                {
                                    "type": "any",
                                    "maximumWarning": "1024mb",
                                    "maximumError": "8192mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "1024kb",
                                    "maximumError": "8192mb"
                                }
                            ]
                        },
                        "hmr": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.hmr.ts"
                                }
                            ]
                        },
                        "dev": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.dev.ts"
                                }
                            ]
                        }
                    }
                },
                "browser": {
                    "production": {
                        "sourceMap": {
                            "hidden": false
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "sourceMap": true,
                    "options": {
                        "browserTarget": "gunto_scripts:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "gunto_scripts:build:production"
                        },
                        "hmr": {
                            "hmr": true,
                            "browserTarget": "gunto_scripts:build:hmr"
                        },
                        "dev": {
                            "browserTarget": "gunto_scripts:build:dev"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "gunto_scripts:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "karmaConfig": "./karma.conf.js",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "styles": [
                            "node_modules/font-awesome/css/font-awesome.css",
                            "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
                            "node_modules/froala-editor/css/froala_style.min.css"
                        ],
                        "assets": [
                            "src/assets",
                            "src/favicon.ico",
                            "src/manifest.json",
                            {
                                "glob": "**/*",
                                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
                                "output": "/assets/"
                            }
                        ],
                        "scripts": [
                            "node_modules/chart.js/dist/Chart.js",
                            "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [ "**/node_modules/**" ]
                    }
                }
            }
        }
    },
    "defaultProject": "gunto_scripts",
    "schematics": {
        "@schematics/angular:component": {
            "prefix": "app",
            "styleext": "scss"
        },
        "@schematics/angular:directive": {
            "prefix": "app"
        }
    },
    "cli": {
        "analytics": "on",
        "warnings": {
            "typescriptMismatch": true,
            "versionMismatch": true
        },
        "packageManager": "npm"
    }
}

[stephanrauh]

Sounds like a huge project! At first glance, I don't see any problem. Just a few unrelated remarks:

• I'm not sure if the "compile" script interferes with the Angular compiler. I don't think so, but it might be worth a try to rename the script.
• A simple ng s -o or ng server --open does the trick. AFAIK --live-reload is the default, and I'm sure --watch is default, too. You don't need to add the angularclass/hmrdependency. But correct me if I'm wrong.
• You've pinned the webpack version to 5.4.0. I also see the ts-loader dependency. Are you using a custom webpack configuration? Maybe that's what causing trouble.

[stephanrauh]

I suppose it's a good idea to start a fresh project and to integrate ngx-extended-pdf-viewer. If you're following the tutorial and if you do everything correctly at first try (something I never do!), that's roughly 10, 15 minutes. If the PDF viewer doesn't show, you know there's something wrong with your node.js or npm or Angular installation. Otherwise, you know your project causes the errors.

[stephanrauh]

@mingli1015 Any news? I suspect you've run into some trouble with npm or the Angular CLI. I didn't hear from you since two weeks, so I assume you've managed to solve the issue. I'm closing the issue now.

[KhoiCanDev]

This bug just happened to me and I was able to fix it, I post it here so it could save someone a day of debugging :)

The bug:

The steps that I took to fix:

• I noticed the ngx-pdf-viewer is checking for the existence of window['pdfjs-dist/build/pdf'] while init
  

• The window['pdfjs-dist/build/pdf'] is assigned by pdf.js library in the red code block, root is the window instance
  

• While debugging, I see it calls the green code block, not the red one, so I ran the code step by step and noticed this
  

• The define.amd was assigned with some data, so it jumps to the green one, JQuery is the hint, so I checked all the dependencies to figure out the culprit, then this is the one
  

• That is the loader script of monaco editor in the @ngstack/code-editor dependency that I have, remove the dependency, then the problem solved

[stephanrauh]

An incompatibility between the Monaco editor and my library? That's a surprise! You say it's caused by the module system? That's something I'm hardly familiar with, but it sounds like I have to dig deeper. Thanks for sharing your insight!

[stephanrauh]

This ticket seems to be a duplicate of #1427. I've solved the bug with version 15.0.0-alpha.2. Please run a test and confirm it solves your issue.

Enjoy!
Stephan

[tavogusta19]

I have a problem, the pdf viewer does not load

[stephanrauh]

@tavogusta19 You've opened a new ticket, so let's continue the discussion over there: #1593.

Everybody else: if you've got insight that might help @tavogusta19, please chime in, either here or at #1593.

[WNS-Shubham]

hello team, I am generated pdf using base64 stream but why I am getting below dialog in my pdf.

@stephanrauh pls suggest what i am missing in pdf properties,

[stephanrauh]

@WNS-Shubham This looks like a CSS problem. Maybe that's caused by third-party CSS.