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

[sylvainb31]

Hi,
Did you get a fix on this issue ? I have the same problem ...
Thanks for your help !

[HelgeWieding]

+1

[harshadduasane]

Hi,
did anyone fix this issue?

[sylvainb31]

Hi guys,
Importing the module directly in the component needed (your-page.module.ts) instead of importing it in app.module.ts fixed it for me.
I hope it will help you too !
For example in my case I needed it in my component resto-desc.ts (template = RestoDescPage).
So in resto-desc.module.ts i have the following code :

`import { NgModule } from '@angular/core;
import { IonicPageModule } from 'ionic-angular';
import { RestoDescPage } from './resto-desc';
import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
declarations: [
RestoDescPage,
],
imports: [
IonicPageModule.forChild(RestoDescPage),
PdfViewerModule,
],
})
export class RestoDescPageModule {}`

[johnecressman]

Did anyone ever figure this out for Ionic4/Angular 7? I'm getting the same sort of error:

app.module.ts
`import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, PdfViewerModule],
providers: [
StatusBar,
SplashScreen,
PdfViewerModule,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}`

home.html
`


NG2-PDF-VIEWER

`

home.ts
`import { Component } from '@angular/core';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
providers: [ ]
})
export class HomePage {

public pdf;
constructor() {
this.pdf = 'http://www.axmag.com/download/pdfurl-guide.pdf';
}

}`

Error message:
`ERROR Error: Uncaught (in promise): 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. ("

]src="{{pdf}}" original-size="true" show-all="true">

"): ng:///HomePageModule/HomePage.html@9:14
'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 ->]

"): ng:///HomePageModule/HomePage.html@9:2
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. ("

]src="{{pdf}}" original-size="true" show-all="true">

"): ng:///HomePageModule/HomePage.html@9:14
'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 ->]

"): ng:///HomePageModule/HomePage.html@9:2
at syntaxError (compiler.js:2430)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
at compiler.js:26101
at Set.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
at compiler.js:26011
at Object.then (compiler.js:2421)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)`

[raovikash]

+1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.