Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compatibility with Angular 5 #1

Closed
HEBOS opened this issue May 7, 2018 · 17 comments
Closed

Compatibility with Angular 5 #1

HEBOS opened this issue May 7, 2018 · 17 comments

Comments

@HEBOS
Copy link

HEBOS commented May 7, 2018

Hi,

I'm trying to implement your package into Angular 5 application. However, it doesn't work.
Can you please see what I need to do to make it work.
I followed your tutorial, but I'm getting the following message:

Error: Template parse errors:
'ng2-pdfjs-viewer' is not a known element:
1. If 'ng2-pdfjs-viewer' is an Angular component, then verify that it is part of this module.
2. If 'ng2-pdfjs-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("


    <div class="some-pdf-container">

        [ERROR ->]<ng2-pdfjs-viewer #pdfViewer

                          pdfSrc="../../../../assets/pdfjs/blank.pdf"><"): ng:///DashboardModule/SettingsComponent.html@3:8

Thanks
@codehippie1
Copy link
Contributor

codehippie1 commented May 7, 2018 via email •
edited

@HEBOS
Copy link
Author

HEBOS commented May 8, 2018

Since my component, that uses PdfJsViewerComponent, is owned by one lazy downloaded module, I needed to put it into that module, and then it works in development mode.
However, when I try to build it with "ng build --extract-css --prod --build-optimizer", I get the the build error.
Can you please advice what to do?

Here is the error log:
ERROR in : Type PdfJsViewerComponent in U:/MongoPlus/MongoPlus.Web/ClientApp/node_modules/ng2-pdfjs-viewer/ng2-pdfjs-viewer.d.ts is part of the declarations of 2 modules: AppModule in U:/MongoPlus/MongoPlus.Web/ClientApp/src/app/app.module.ts and PdfJsViewerModule in U:/MongoPlus/MongoPlus.Web/ClientApp/node_modules/ng2-pdfjs-viewer/ng2-pdfjs-viewer.d.ts! Please consider moving PdfJsViewerComponent in U:/MongoPlus/MongoPlus.Web/ClientApp/node_modules/ng2-pdfjs-viewer/ng2-pdfjs-viewer.d.ts to a higher module that imports AppModule in U:/MongoPlus/MongoPlus.Web/ClientApp/src/app/app.module.ts and PdfJsViewerModule in U:/MongoPlus/MongoPlus.Web/ClientApp/node_modules/ng2-pdfjs-viewer/ng2-pdfjs-viewer.d.ts. You can also create a new NgModule that exports and includes PdfJsViewerComponent in U:/MongoPlus/MongoPlus.Web/ClientApp/node_modules/ng2-pdfjs-viewer/ng2-pdfjs-viewer.d.ts then import that NgModule in AppModule in U:/MongoPlus/MongoPlus.Web/ClientApp/src/app/app.module.ts and PdfJsViewerModule in U:/MongoPlus/MongoPlus.Web/ClientApp/node_modules/ng2-pdfjs-viewer/ng2-pdfjs-viewer.d.ts.

@codehippie1
Copy link
Contributor

It looks like you are delaration of "PdfJsViewerComponent" is repeated. If you can post a working version of issue in plunker/or other hosting sites, I may be able to help.

@xiaoxiao95888
Copy link

have same problem

@codehippie1
Copy link
Contributor

@HEBOS I will look into the sample you provided, and get back

@codehippie1
Copy link
Contributor

@HEBOS unfortunately, the link you have provided is blocked at my work(stating Personal Network Storage). Would you be able to upload sample code elsewhere?

@HEBOS
Copy link
Author

HEBOS commented May 11, 2018

Here is a web download. I hope it will work.

@codehippie1
Copy link
Contributor

codehippie1 commented May 11, 2018 via email

@codehippie1
Copy link
Contributor

codehippie1 commented May 11, 2018 via email

@codehippie1
Copy link
Contributor

codehippie1 commented May 14, 2018 •
edited

@HEBOS Unfortunately I was not able to reproduce the issue. Since the cli in your sample was ~1.7.3 and I use cli > 6.0.1, I created a new angular 6 template app and tried to reproduce the issue. The pdfjs viewer worked just fine. For your reference, I have uploaded the sample app under "ng6SampleApp" folder in this repository. It is just sample ng6 app with ng2-pdfjs-viewer configured in it.

@codehippie1
Copy link
Contributor

@HEBOS @xiaoxiao95888 Since there is no further updates on this thread, assuming all is well. Closing the issue. Please refer to the demo app 'ng6SampleApp' in the repository for angular usage.

@HEBOS
Copy link
Author

HEBOS commented May 20, 2018

Hi,

Can you please reopen this issue, and try to resolve it.
I have an update now. It took me some time to update the project to 6.0.

I see you've added project for Angular 6 in this repository, so this will be now much easier to solve.
Did you try to build it using:
ng build --prod --build-optimizer --output-hashing media

You will get the same error, but everything works fine if you build for development using:
ng build

The proper way is that we import your PdfJsViewerModule, and not to declare PdfJsViewerComponent in our module once more.
Components can't be defined in two modules.
I tried to ignore your instructions, and import "PdfJsViewerModule" instead, but it can't be done, because there is an error in component definition.
As you can find on the following page, you should rename "src" private variable to something like "innerSrc", since the component template is using an IFRAME DOM object as root object, and IFRAME also contains "src" property.

See this comment:
@j-nord Unfortunatelly, yes you will have to change all the components variable from private to public if they are used into your template. It's not a angular CLI issue, it's an angular requirements that was not well reported by the CLI until now (reference: angular/angular-cli#5621 (comment))

In short, the required steps to make it working for AOT compilation are:

  1. Change private src to innerSrc in "ng2-pdfjs-viewer/src/ng2-pdfjs-viewer.component.ts"
  2. Change instructions to the following:
import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';

@NgModule({
    imports: [
        ..
        PdfJsViewerModule
    ],
    declarations: [
	..
    ],
    providers: [
    ..
    ]    
})

Thank you

@codehippie1 codehippie1 reopened this May 21, 2018
@codehippie1
Copy link
Contributor

@HEBOS Good find. I am looking into your inputs now.

@codehippie1
Copy link
Contributor

@HEBOS Good catch. Not only I reproduced the issue, I have fixed it. Stranger ways cli produces different results on 'prod' and 'non-prod' builds.

  1. I have added a getter to pdfSrc instead of making src public. (Still renamed the variable to innerSrc as per your suggestion for better readability.)
  2. Published version 0.2.20 with fix
  3. Updated sample app with proper configurations.

Please let me know if the fix worked for you.

@codehippie1
Copy link
Contributor

@HEBOS npm is going through a bit of downtime now. Please refer to this issue opened an hour ago. npm/npm#20714

@codehippie1
Copy link
Contributor

codehippie1 commented May 22, 2018 •
edited

npm issue seems fixed. Latest available package is 0.2.28. It also has some improvements, better sample app and an external window related bug fix

@codehippie1
Copy link
Contributor

@HEBOS As I haven't heard from you, closing this issue. Let me know if you face any problems.

codehippie1 pushed a commit that referenced this issue Jan 9, 2023
@shahmeet999
Merge pull request #1 from shahmeet999/shahmeet999-patch-1
0dda739 
Support the E-signature in rendering the PDF
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@xiaoxiao95888 @codehippie1 @HEBOS