CODEWITHSUNDEEP
angularcordovaionic-frameworkionic2ionic3
Geoff
Geoff

Reputation: 53

ionic - Can't bind to 'src' since it isn't a known property of 'pdf-viewer'

Currently working with PDF-Viewer with Angular and Firebase, I keep getting the runtime error "Can't bind to 'src' since it isn't a known property of 'pdf-viewer'".

Does anyone know why this is? Here is my dependency list:

"dependencies": {
"@angular/common": "4.4.3",
"@angular/compiler": "4.4.3",
"@angular/compiler-cli": "4.4.3",
"@angular/core": "4.4.3",
"@angular/forms": "4.4.3",
"@angular/http": "4.4.3",
"@angular/platform-browser": "4.4.3",
"@angular/platform-browser-dynamic": "4.4.3",
"@ionic-native/core": "4.3.2",
"@ionic-native/file": "^4.4.2",
"@ionic-native/file-opener": "^4.4.2",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic/storage": "2.0.1",
"@types/html2canvas": "^0.5.35",
"@types/jspdf": "^1.1.31",
"cordova-android": "6.3.0",
"cordova-pdf-generator": "^1.9.3",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-file": "^5.0.0",
"angularfire2": "^5.0.0-rc.4",
"cordova-browser": "5.0.1",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-file-opener2": "^2.0.19",
"cordova-plugin-file-transfer": "^1.7.0",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.3.0",
"cordova-plugin-whitelist": "^1.3.1",
"firebase": "^4.6.1",
"html2canvas": "^0.5.0-beta4",
"ionic-angular": "3.7.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"jspdf": "^1.3.5",
"ng2-pdf-viewer": "^3.0.2",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.0.1",
"typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
  "cordova-plugin-device": {},
  "cordova-plugin-ionic-webview": {},
  "cordova-plugin-splashscreen": {},
  "cordova-plugin-whitelist": {},
  "ionic-plugin-keyboard": {},
  "cordova-plugin-statusbar": {},
  "cordova-plugin-file": {},
  "cordova-plugin-file-transfer": {},
  "cordova-pdf-generator": {},
  "cordova-plugin-file-opener2": {}
},
"platforms": [
  "browser",
  "android"
]
}

I've tried rolling back dependencies to earlier states but that seems to just cause more problems. Any help would be greatly appreciated.

one area ive used pdf viewer

<div id="pdfPreview">
        <pdf-viewer [src]="srcPdf"  [render-text]="true" [page]="1" [original-size]="false"
        style="display: block;"
        ></pdf-viewer>

    <!--<img 

   src="assets/img/45SeroAhRyuPNagS090v_
  DM2AjubpQ1SXM2UlmWa8_PeterWyrostekTicketApp
  eal123456.jpg" style="display:block;width:100%;height:auto;margin-
 left:auto;margin-right:auto;" />-->
</div>

Another area where im using pdf viewer:

   <div>
    <pdf-viewer [src]="srcPdf"  [render-text]="true" [page]="1" [original-size]="false"
    style="display: block;"
    ></pdf-viewer>
    <!--<img src="data:image/jpeg;base64, img" style="display:block;width:100%;height:auto;margin-left:auto;margin-right:auto;" />-->
</div>

error log:

syntaxError@http://localhost:8107/build/vendor.js:94243:39
parse@http://localhost:8107/build/vendor.js:105481:30
_compileTemplate@http://localhost:8107/build/vendor.js:119675:44
forEach@[native code]
_compileComponents@http://localhost:8107/build/vendor.js:119594:26
http://localhost:8107/build/vendor.js:119481:37
compileModuleAsync@http://localhost:8107/build/vendor.js:119409:64
_bootstrapModuleWithZone@http://localhost:8107/build/vendor.js:4893:43
http://localhost:8107/build/main.js:3904:124
__webpack_require__@http://localhost:8107/build/vendor.js:55:34
webpackJsonpCallback@http://localhost:8107/build/vendor.js:26:42
global code@http://localhost:8107/build/main.js:1:13

So if I'm reading this correctly theres a syntax error in vendor.js? I thought that was auto generated when building?

Upvotes: 4

Views: 6363

Answers (2)

n00b
n00b

Reputation: 1852

Two reasons why this happens:

  1. your component is not added to declarations in your module.(directly or by importing other modules) so Angular can not figure out what Inputs your component can take.
  2. Your component does not have a 'src' Input parameter.

in your case looks like you have forgot to import the module in your application module. https://github.com/VadimDez/ng2-pdf-viewer

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

@NgModule({
  imports: [BrowserModule, PdfViewerModule],

Upvotes: 1

Melchia
Melchia

Reputation: 24274

This issue rises when you don't import properly the module in this case PdfViewerModule Like this scenario

-- app.module.ts --> move PdfViewerModule here if you're not sure.
---- sub1.module.ts --> move PdfViewerModule import here can work too.
------ sub1_1.module.ts --> Maybe you imported the module here & you use it somewhere else out the scope of this submodule.

Either way this an example how to import PdfViewerModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

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

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Upvotes: 0

Related Questions