Problems with PdfViewerComponent with ionic


#1

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’.

  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.
    ("
    <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!


Run/build produce different results with ng2-pdf-viewer
#2

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


#3

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 {


#4

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.


#5

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

  1. Navigate to your ionic app about the console or open the git-console

  2. Install ng2-pdf-viewer npm install ng2-pdf-viewer --save

  3. 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.


#6

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?


#7

would u share ur code please


#8

Thanks for the reply


#9

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


#10

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’.

  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.

  3. 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:

  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 ->]