Problems with PdfViewerComponent with ionic

veerajshenoy · October 13, 2016, 8:35pm

Tried this
import { Component } from ‘@angular/core’;
import { PdfViewerComponent } from ‘ng2-pdf-viewer’;
import { NavController } from ‘ionic-angular’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
providers: [PdfViewerComponent]
})
export class HomePage {
pdfSrc: string = ‘/pdf.pdf’;
page: number = 1;
constructor(public navCtrl: NavController) {
}

}

PDF src

Page:

gets error

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can’t bind to ‘src’ since it isn’t a known property of ‘pdf-viewer’.

If ‘pdf-viewer’ is an Angular component and it has ‘src’ input, then verify that it is part of this module.
If ‘pdf-viewer’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the ‘@NgModule.schemas’ of this component to suppress this message.
("
<input type=“number” placeholder=“Page” [(ngModel)]=“page”>

][src]="pdfSrc" [initialPage]="page" [original-size]="true" style="display: block;"> </io"): HomePage@17:14 Can't bind to 'initialPage' since it isn't a known property of 'pdf-viewer'. 1. If 'pdf-viewer' is an Angular component and it has 'initialPage' input, then verify that it is part of this module. 2. If 'pdf-viewer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" ][initialPage]="page" [original-size]="true" style="display: block;"> "): HomePage@17:29 Can't bind to 'original-size' since it isn't a known property of 'pdf-viewer'. 1. If 'pdf-viewer' is an Angular component and it has 'original-size' input, then verify that it is part of this module. 2. If 'pdf-viewer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("" placeholder="Page" [(ngModel)]="page"> ][original-size]="true" style="display: block;"> "): HomePage@17:50 'pdf-viewer' is not a known element: 1. If 'pdf-viewer' is an Angular component, then verify that it is part of this module. 2. If 'pdf-viewer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]</pdf-"): HomePage@17:2 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't bind to 'src' since it isn't a known property of 'pdf-viewer'. 1. If 'pdf-viewer' is an Angular component and it has 'src' input, then verify that it is part of this module. 2. If 'pdf-viewer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Please help!

veerajshenoy · October 13, 2016, 9:25pm

Solved this. Got it running on ionic serve.
But while building I get an error.

[02:52:13] ngc: Error: Unexpected value ‘PdfViewerComponent’ declared by the mo
dule 'AppModule’
at D:\development\ionic\ionic2\Mahabharat\node_modules@angular\compiler\bun
dles\compiler.umd.js:14044:33
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (D:\development\ionic\ionic2
Mahabharat\node_modules@angular\compiler\bundles\compiler.umd.js:14031:51)
at D:\development\ionic\ionic2\Mahabharat\node_modules@angular\compiler\bun
dles\compiler.umd.js:12801:47
at Array.forEach (native)
at analyzeModules (D:\development\ionic\ionic2\Mahabharat\node_modules@angu
lar\compiler\bundles\compiler.umd.js:12800:17)
at OfflineCompiler.analyzeModules (D:\development\ionic\ionic2\Mahabharat\no
de_modules@angular\compiler\bundles\compiler.umd.js:12826:18)
at CodeGenerator.codegen (D:\development\ionic\ionic2\Mahabharat\node_module
s@angular\compiler-cli\src\codegen.js:105:47)
at codegen (D:\development\ionic\ionic2\Mahabharat\node_modules@angular\com
piler-cli\src\main.js:7:81)
at Object.main (D:\development\ionic\ionic2\Mahabharat\node_modules@angular
\tsc-wrapped\src\main.js:30:16)

[02:52:13] ngc: Compilation failed

[02:52:13] ngc failed: NGC encountered an error
[02:52:13] Error: NGC encountered an error
at ChildProcess. (D:\development\ionic\ionic2\Mahabharat\node_mod
ules@ionic\app-scripts\dist\ngc.js:62:24)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at ChildProcess.cp.emit (D:\development\ionic\ionic2\Mahabharat\node_modules
\cross-spawn\lib\enoent.js:40:29)
at maybeClose (internal/child_process.js:829:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
Error running ionic app script “build”: Error: NGC encountered an error

npm ERR! Windows_NT 6.3.9600
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Users\Veeraj Shenoy\A
ppData\Roaming\npm\node_modules\npm\bin\npm-cli.js” “run” "build"
npm ERR! node v4.5.0
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! mahabharat@ build: ionic-app-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mahabharat@ build script ‘ionic-app-scripts build’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mahabharat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs mahabharat
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls mahabharat
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\development\ionic\ionic2\Mahabharat\npm-debug.log

tergene · October 23, 2016, 5:44am

I had the same error, it works fine with ionic serve (and ionic serve -l). It failed in building for android and ios though. Here is how I fixed it in my code:

…
import { Key } from “…/…/utils/key”;

declare var setLanguage; //Makes sure this forcing of type (a hack) is here

@Component({
selector: “page-home”,
templateUrl: “home.html”,
providers: [Storage]
})

//declare var setLanguage; //NOT HERE, was broken when putting it here.

export class HomePage {
…

yellowcube · December 23, 2016, 2:19am

Hi veerajshenoy,
May i know how you solved the “‘pdf-viewer’ is not a known element:” problem.
I also having the same issue but got not idea how to solve it. please help.

IPrototypeI · January 2, 2017, 10:02pm

Hello yellowcube, sry for the late answer, maybe you already fix your problem,
but this post could help others maybe too.

Navigate to your ionic app about the console or open the git-console
Install ng2-pdf-viewer npm install ng2-pdf-viewer --save

Now you have to open the app.module.ts and add

 import { PdfViewerComponent } from 'ng2-pdf-viewer';

and add it to the NgModule

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    PdfViewerComponent
  ],

4 . Now you can add following code to your template

<ion-content>
	<pdf-viewer src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer>
</ion-content>

5 . Now you can edit the controller.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import {PdfViewerComponent} from 'ng2-pdf-viewer';

@Component({
  selector: 'page-pdf',
  templateUrl: 'pdf.html',
  providers: [PdfViewerComponent]
})
export class PdfPage {
  public pdf;
  constructor(public navCtrl: NavController) {
    this.pdf = "https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf"; 
  }

But be careful with internal and http - links you get a No ‘Access-Control-Allow-Origin’ error.

yellowcube · January 12, 2017, 5:29am

Thanks @IPrototypeI for the solution provided. It works.

May i know whether the original-size=“true” function is still working ?

i did try to change it to false but the pdf still out of the screen and i also tried the pdf-viewer inside the ion-scroll but it doesn’t work for me.
Do you have any idea to fit it to the screen?

mharam2000 · February 24, 2017, 12:26am

would u share ur code please

kumaripriti · July 10, 2017, 7:42am

Thanks for the reply

shanester · August 7, 2017, 5:40pm

I can’t get the viewer to work with local files. I’ve put a pdf in the home directory (my component) and I’ve tried using
this.pdf = ‘./firebase.pdf’;
but this doesn’t show anything (no error either).
Any help?

Thanks

Shane

gashutosh05 · May 7, 2018, 6:09am

i am getting this error
ncaught Error: Template parse errors:
Can’t bind to ‘src’ since it isn’t a known property of ‘pdf-viewer’.

If ‘pdf-viewer’ is an Angular component and it has ‘src’ input, then verify that it is part of this module.
If ‘pdf-viewer’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("

<pdf-viewer [ERROR ->]src="{{pdf}}" original-size=“true” show-all=“true”>

"): ng:///AppModule/PaperView.html@22:18
‘pdf-viewer’ is not a known element:

If ‘pdf-viewer’ is an Angular component, then verify that it is part of this module.
If ‘pdf-viewer’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("

[ERROR ->]

YXUN · April 12, 2020, 7:42am

Hi, did you solve the issue?