PDFTron 库不适用于 Angular 组件库

Question

I started my first Angular component library where I am adding PDFTron lib so I can use my wrapper lib on all of my projects. Direct PDFTron integration working fine with library path but with my Angular component library, it's not taking library. See more details as mentioned below:

My Code to load PDFTron Library:

PDFViewerPage (Direct Use of PDFtron Library ):

WebViewer({
      path: './assets/lib/',
      // initialDoc: '../../../assets/data/files/webviewer-demo-annotated.pdf'
      initialDoc: this.initialDoc
    }, this.viewer.nativeElement).then(instance => {
      console.log(instance);
      this.wvInstance = instance;
    }).catch(error => {
      console.log("PDF error:",error);
 })

My Custom NPM library:

WebViewer({
      path: this.libPath,
      initialDoc: this.initialDoc
    }, this.viewer.nativeElement).then(instance => {
      console.log(instance);
      this.wvInstance = instance;
    }).catch(error => {
      console.log("PDF error:",error);
 })

this one is not working as my library code is in @Node-Modules and my lib folder is in ./assets folder in the project.

Folder Structure of assets:

The library can't be accessible in my custom library how can I access PDFTron library in my custom NPM?

Error:

ERROR Error: Uncaught (in promise): TypeError: pdftron_webviewer__WEBPACK_IMPORTED_MODULE_0 _ is not a function TypeError: pdftron_webviewer__WEBPACK_IMPORTED_MODULE_0 _ is not a function at MyFirstNpmProjComponent.ngAfterViewInit (my-first-npm-proj.mjs:36:9) at callHook (core.mjs:2533:22) at callHooks (core.mjs:2502:17) at executeInitAndCheckHooks (core.mjs:2453:9) at refreshView (core.mjs:9555:21) at refreshComponent (core.mjs:10655:13) at refreshChildComponents (core.mjs:9280:9) at refreshView (core.mjs:9534:13) at renderComponentOrTemplate (core.mjs:9598:9) at tickRootContext (core.mjs:10829:9) at resolvePromise (zone.js:1255:1) at resolvePromise (zone.js:1209:1) at zone.js:1321:1 at ZoneDelegate.invokeTask (zone.js:434:1) at Object.onInvokeTask (core.mjs:25463:33) at ZoneDelegate.invokeTask (zone.js:433:1) at Zone.runTask (zone.js:205:1) at drainMicroTaskQueue (zone.js:620:1)

I am not sure what path I am missing or any extra setup is required for this?

Answer 1

You could edit your assets option in angular.json. Like

assets: [
 "src/asset/lib"
]

You can check this for reference: https://angular.io/guide/workspace-config#asset-config . Hope this one can help

Answer 2

I recently ran into this exact same issue. While I'm not 100% sure of the cause, it seems like the webpack dev server is packaging the pdftron library in an unexpected way.

I have been able to solve the issue in my project. My project is using Angular v13.3 and PDFTron Webviewer v8.5 from NPM.

Two changes were made to my project:

First: We see from the PDFTron Angular docs that we should add the pdftron script to the project in angular.json . Don't follow the doc exactly. We use the path to node_modules .

"scripts": [
  "node_modules/@pdftron/webviewer/webviewer.min.js"
],

Second: We need to use the WebViewer which comes from webviewer.min.js . This part seems strange and like it should work... but, don't import it at all.

Again from PDFTron docs :

declare const WebViewer: any;

With this set, I am able to construct an Angular component in my library and then use it in several applications.

Again, I'm not exactly sure what webpack is doing wrong, but this seems to work around the issue.