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

[drechema]

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?

[VadimDez]

What version of ng2-pdf-viewer are you using?
Can you show me how you imported PdfViewerModule?

[clefournis]

same issue here, I can only use the component for one PDF, if I try to load more than one PDF on different pages I receive the following error:
Uncaught (in promise): Error: Template parse errors: Can't bind to 'src' since it isn't a known property of 'pdf-viewer'. Using the latest code

[drechema]

The version is ng2-pdf-viewer@^3.0.0.
The AspNetCore angular template use three app.module files see:https://github.com/aspnet/JavaScriptServices

app.module.browser
app.module.server
app.module.shared

I did the import:
import { PdfViewerModule } from 'ng2-pdf-viewer';

and the declaration:

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
...
})

at app.module.browser

[VadimDez]

@drechema Could it be because you didn't import PdfViewerModule in app.module.server ?

[drechema]

app.module.browser is the module to be execute in the browser.

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

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule,
        AppModuleShared
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

app.module.server is the module for server processing.

I'll test importing in one or another place and came back.

Thanks

[emrealparslan93]

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.

[drechema]

Thanks for the comment @emrealparslan93 !

[dorotak]

@drechema Did you manage to find solution ? I'm getting the same error...

[drechema]

Not really.
The problem with the AspNetCore angular template is how manage the the Server-side prerendering. I mean, even though the Angular app normally runs in the browser, your ASP.NET Core server can run it on the server too. There are limitations with server-side rendering. Notably, your application code can’t just assume it always runs in a browser. If you try to reference the browser’s DOM directly, you’ll get an error like window is undefined when it runs server-side.
I am still not able to manage this question in a seamless way. This entry can maybe explain me better: https://github.com/aspnet/JavaScriptServices/issues/483

[VadimDez]

@drechema The error you posted before:

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.

is simply saying that it cannot find the pdf-viewer component, so double check that you imported it into both browser and server modules.

For the server rendering, you'll need at least version 3.0.2 of pdf-viewer.

[dorotak]

3.0.2 fixed the error! thanks!

[VadimDez]

@drechema did it fix your problem as well?

[drechema]

Finally I chose another way to render the PDF not using the component
Thanks in any case

[zeeshangithub]

@drechema can you please share that other way to display the pdf?