Repository: VadimDez/ng2-pdf-viewer

Issue #148: Error : Cannot read property 'getPage' of undefined
Created: 2017-08-29T05:48:54Z
I keep getting the following error while page rendering:
ERROR TypeError: Cannot read property 'getPage' of undefined at PdfViewerComponent.webpackJsonp.../../../../ng2-pdf-viewer/dist/pdf-viewer.component.js.PdfViewerComponent.renderPage (pdf-viewer.component.js:142) at PdfViewerComponent.webpackJsonp.../../../../ng2-pdf-viewer/dist/pdf-viewer.component.js.PdfViewerComponent.render (pdf-viewer.component.js:118) at pdf-viewer.component.js:91 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192) at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:499) at ZoneTask.invoke (zone.js:488) at timer (zone.js:1896)
Although, the pages can still be rendered. I debugged and found the issue to be in the following block:
PdfViewerComponent.prototype.renderPage = function (pageNumber) { var _this = this; return this._pdf.getPage(pageNumber).then(function (page) { var viewport = page.getViewport(_this._zoom, _this._rotation); var container = _this.element.nativeElement.querySelector('div'); if (!_this._originalSize) { viewport = page.getViewport(_this.element.nativeElement.offsetWidth / viewport.width, _this._rotation); } if (!_this._showAll) { _this.removeAllChildNodes(container); } return page.getOperatorList().then(function (opList) { var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs); return svgGfx.getSVG(opList, viewport).then(function (svg) { var $div = document.createElement('div'); $div.classList.add('page'); $div.setAttribute('data-page-number', "" + page.pageNumber); $div.appendChild(svg); container.appendChild($div); }); }); }); };
this._pdf doesn't contain getPages() method. Any suggestions ?

Duplicate issue #191: ng2-pdfviewer stops wroking
Created: 2017-10-31T04:41:13Z
I am having a very strange issue! I am using ng2-pdfviewer for viewing some pdf. It was working fine for dev as well as for prod. But now if I do npm update it works fine for dev as well as for prod. But after sometime it stops working even for prod and gives following exception.

When I run npm update it start working fine.I am unable to understand why it stops working for prod as is wokrs fine at time of making build and even after being deployed. But after a day or two it stops working with same exception. Following is my package.json
{
"name": "portal",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "http-server",
"lint": "tslint "src/**/.ts"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"preinstall": "npm install -g http-server",
"postinstall": "ng build && mv dist/ .",
"clean": "rm -rf dist",
"build:prod": "ng build --prod --aot --build-optimizer --vendor-chunk=true",
"bundle-report": "webpack-bundle-analyzer dist/stats.json",
"build_prod": "npm run build && browserify -s main dist/main.js > dist/bundle.js && npm run minify",
"minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.3.6",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/cli": "^1.4.9",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.17",
"@types/jasmine": "^2.6.2",
"@types/jquery": "^3.2.12",
"@types/node": "^6.0.88",
"angular2-draggable": "^1.0.7",
"angular2-modal": "^2.0.3",
"angulartics-mixpanel": "^0.1.3",
"angulartics2": "^2.5.0",
"bootstrap": "^4.0.0-beta.2",
"codelyzer": "^2.1.1",
"core-js": "^2.4.1",
"es6-shim": "^0.35.3",
"file-saver": "^1.3.3",
"hammerjs": "2.0.8",
"jasmine-core": "^2.8.0",
"jasmine-spec-reporter": "^3.3.0",
"jquery": "3.2.1",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"mixpanel-browser": "^2.13.0",
"moment": "^2.18.1",
"ng-onload": "^0.8.0",
"ng2-dragula": "^1.5.0",
"ng2-pdf-viewer": "^1.2.6",
"ngx-bootstrap": "^1.9.3",
"pdfjs-dist": "^1.10.92",
"protractor": "~5.1.0",
"rxjs": "^5.5.2",
"ts-node": "^2.1.2",
"tslint": "^4.5.1",
"uglify-js2": "^2.1.11",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/core-js": "^0.9.43",
"@types/google.analytics": "0.0.35",
"angular-router-loader": "^0.6.0",
"babel": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"browserify": "^14.5.0",
"budo": "^10.0.4",
"compression-webpack-plugin": "^1.0.0",
"factor-bundle": "^2.5.0",
"ng2-modal-module": "^0.2.2",
"node-sass": "4.5.3",
"rollup": "^0.48.2",
"rollup-plugin-commonjs": "^8.2.6",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-uglify": "^2.0.1",
"source-map-explorer": "^1.5.0",
"tsify": "^3.0.1",
"typescript": "^2.5.3",
"uglify-js": "^2.8.29",
"uglifyjs-webpack-plugin": "^1.0.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-config": "^7.4.0"
}
}
and following is angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "frontend"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
],
"scripts": [
"../node_modules/hammerjs/hammer.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
and following is my ng version
_                      _                 ____ _     ___
/ \   _ __   __ _ _   | | __ _ _ __     / | |   | |
/ △ \ | ' \ / _ | | | | |/ _ | '|   | |   | |    | |
/ ___ | | | | (| | || | | (| | |      | || | | |
//   __| ||_, |_,||_,||       _|||
|___/
@angular/cli: 1.4.9
node: 8.2.0
os: linux x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.4.9
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/compiler-cli: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
typescript: 2.5.3

Closing comment (2017-10-31T17:41:24Z): Seems like duplicate #148