Can’t bind to ‘src’ since it isn’t a known property of ‘pdf-viewer’

Try to do the first example of ng2-pdf-viewer with AspNetCore angular template I get:

Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: 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.

$ mkdir dotnet-angular-pdf-demo
$ cd .\dotnet-angular-pdf-demo
$ dotnet new angular
$ npm install ng2-pdf-viewer –save

–> make changes as you suggest in:
–> app.module.browser.ts
–> home.component.ts

$ dotnet restore
$ dotnet run

Any help?

1 possible answer(s) on “Can’t bind to ‘src’ since it isn’t a known property of ‘pdf-viewer’

  1. I had same issue but I solved it by moving PdfViewerModule import to a higher module.

    — app.module.ts
    —- layout.module.ts –> I moved PdfViewerModule import here and it worked properly.
    —— inside.module.ts –> I tried to import it here -where I will use it-, but It didn’t work and gave the same error.

Can’t bind to ‘src’ since it isn’t a known property of ‘pdf-viewer’

HI,
getting Error where using ng2-pdf-viewer using npm
Description:
using
Ionic framework 3.9
npm 5.6.0
node 8.9.4
angular 4

getting Can’t bind to ‘src’ since it isn’t a known property of ‘pdf-viewer’
for building for android 7.0
i checked with ng2-pdf-viewer@3.8.0 version too
Please help getting error like
‘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-viewer
[src]=”pdfSrc” [show-all]=”false” [page]=”page” (after-load-complete)=”afterLoadComplete(“)

this is my app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { PdfViewerModule } from ‘ng2-pdf-viewer’;
import { MyApp } from ‘./app.component’;
import { ZoomAreaModule } from ‘../pages/zoom/zoom-area.module’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { InAppBrowser } from ‘@ionic-native/in-app-browser’;
import { FileTransfer } from ‘@ionic-native/file-transfer’;
import { FCM } from ‘@ionic-native/fcm’;
import { BackgroundMode } from ‘@ionic-native/background-mode’;
import { HttpModule } from ‘@angular/http’;
import { Network } from ‘@ionic-native/network’;
import { Vibration } from ‘@ionic-native/vibration’;
import { Device } from ‘@ionic-native/device’;
import { DatePicker } from ‘@ionic-native/date-picker’;
import { FilePath } from ‘@ionic-native/file-path’;
import { FileChooser } from ‘@ionic-native/file-chooser’;
import { PdfViewerPageModule } from ‘../pages/patient-module/pdf-viewer/pdf-viewer.module’;

@NgModule({
declarations: [
MyApp,

],
imports: [
BrowserModule,
PdfViewerModule,
BrowserAnimationsModule,
PdfViewerPageModule,
ZoomAreaModule.forRoot(),
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,

],
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
FileTransfer,
FileChooser,
FilePath,
DatePicker,
Device,
Vibration,
Network,
BackgroundMode,
FCM,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
],
schemas:[CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
export class AppModule { }

**-**when running with “ionic cordova run android –prod” and “ionic serve”

1 possible answer(s) on “Can’t bind to ‘src’ since it isn’t a known property of ‘pdf-viewer’

  1. 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 {}`