Bring in a namespace including a function from PDFTron within an Angular application

Trying to utilize the PDFTron library known as "@pdftron/webviewer" with version "^6.2.3". I am starting off with this sample code provided at https://github.com/PDFTron/webviewer-angular-sample

The library includes a CoreControls namespace, which is described as follows:

export declare namespace CoreControls {}

In my app.component.ts file, I have imported it using:

import {CoreControls} from '@pdftron/webviewer';

Now, when attempting to use it like this:

ngOnInit() {
  CoreControls.createDocument('blabla');
}

An error occurred stating:

"ERROR TypeError: Cannot read property 'createDocument' of undefined".

I am interested in utilizing their API without WebViewer, as demonstrated here - . However, something seems amiss, whether it be my understanding of Angular or TypeScript, or perhaps the compatibility of PDFTron with Angular.

It seems like there are things that I do not quite comprehend.

angulartypescriptpdftron

Answer №1

It seems that the CoreControls module imported from the statement

import {CoreControls} from '@pdftron/webviewer';

serves as a type declaration rather than the actual class itself. This could be why CoreControls is undefined when attempting to access it.

To fix this issue, you should include the CoreControls script directly in the HTML file. Specifically, within the file https://github.com/PDFTron/webviewer-angular-sample/blob/master/src/index.html, insert a 

<script src=path></script>
tag where "path" represents the location of the CoreControls.js within the npm package.

I hope this solution resolves your problem!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we restrict the type without altering the original type?

import { CSSProperties } from 'react'; type StyleRulesType = Partial<CSSProperties> type StylesDefinition = { [key: string]: StyleRulesType }; const styles: StylesDefinition = { list: { position: 'relative', }, ...

reactjstypescriptjss

What could be the reason why the keypress event doesn't seem to be functioning properly on

Currently, I am utilizing Angular and the Ionic framework. Here is a snippet of the HTML code that I have written: <div><ion-input type="text" id="phoneNumber" [(ngModel)]="phoneNumber" (keypress)="phoneNumericCh ...

angulartypescriptionic-frameworkeventskeypress

The Element is Unfamiliar - Application with Multiple Modules

I seem to be facing an issue with how my modules are structured, as I am unable to use shared components across different modules. Basically, I have a Core module and a Feature module. The Core module contains components that I want to share across multip ...

angulartypescript

The element 'mat-slide-toggle' is unrecognized following the import

I'm currently facing an issue with using <mat-slide-toggle>Click me!</mat-slide-toggle> in a component that already has the MatSlideToggleModule imported. Strangely, I'm still encountering an error stating that it's not a recogni ...

htmlangularangular-materialslidetoggle

Struggling to track down the issue in my ts-node express project (Breakpoint being ignored due to generated code not being located)

For my current project, I decided to use the express-typescript-starter. However, when I attempted to debug using breakpoints in VS Code, I encountered an issue where it displayed a message saying "Breakpoint ignored because generated code not found (sourc ...

node.jsexpresstypescript

Is it possible to utilize the inline/hardcoded type declared in the component.d.ts file for reuse

Is there a way to pass props selectively to the library component? The library has hardcoded multiple values in an inline type. If my code needs to automatically update with any new additions to the library-defined type, can I reuse those inline values r ...

javascriptreactjstypescript

CreatePortalLink directs users to a payment URL instead of a dashboard

I am currently working on a project that utilizes the Stripe payments extension in conjunction with Firebase. The application is built using Next JS. After a user subscribes, I want to provide them with a tab where they can manage their subscription. The ...

javascripttypescriptfirebasenext.jsstripe-payments

Dividing points in half at the top and bottom edges in a chart using chartjs

https://i.sstatic.net/AfosF.png Upon observation of the provided image, it can be seen that the points are halved when they reach the top or bottom edges, specifically when the data points are 1 or 5 in this context. Various attempts were made to address ...

javascriptangulartypescriptconfigurationchart.js

Issues with Firebase Cloud Messaging functionality in Angular 10 when in production mode

Error: Issue: The default service worker registration has failed. ServiceWorker script at https://xxxxxx/firebase-messaging-sw.js for scope https://xxxxxxxx/firebase-cloud-messaging-push-scope encountered an error during installation. (messaging/failed-ser ...

angulartypescriptfirebasefirebase-cloud-messaging

What steps can I take to resolve the issue "Need to provide a return value at the end of the arrow function."?

While working with typescript and eslint, I encountered an issue where Eslint was flagging a return statement after the => arrow. Even after making adjustments, it still didn't work as expected - return new Promise((resolve, reject) => return {} ...

reactjstypescriptecmascript-5

Select items displayed next to each other with varying number of columns in HTML

Users can select a medicine for each day of their plan, with the option to choose up to 7 days. I want to dynamically show a corresponding number of Select dropdowns based on the user's selection. body { width: 500px; margin: 0 auto; ...

htmlcssangular

Typescript i18next does not meet the requirement of 'string | TemplateStringsArray NextJS'

While attempting to type an array of objects for translation with i18next, I encountered the following error message in the variable navItems when declaring i18next to iterate through the array Type 'NavItemProps[]' does not satisfy the constrain ...

reactjstypescriptnext.jsinternationalizationi18next

In Typescript, invoking toString() does not alter the data type of the property

When I encounter the error in the valorControlo property, it states: The 'valorControlo' property does not exist on the type 'string'. Even after adding the toString(), the issue persists. Here is the snippet of code: const [isBarExten ...

reactjsstringtypescriptstatetostring

Using ngFormModel with Ionic 2

How can I properly bind ngFormModal in my Ionic 2 project? I am facing an issue while trying to import it on my page, resulting in the following error message: Uncaught (in promise): Template parse errors: Can't bind to 'ngFormModel' since ...

angulartypescriptionic2

Conceal particular information within a repeated sequence and reveal it within a secret panel

I am working on a component that needs to show a hidden form when a specific content is clicked. I have successfully achieved this functionality, but now I also need to hide the original content div and display the hidden form in its place without affect ...

htmlcssangulartypescript

Is there a way to send client browser console logs to the backend via a REST API in an Angular 4 application?

Is there a way to send client browser console logs to the backend using a REST API in an Angular 4 application? I need all types of logs (Console.log, console.error, console.warn) to be forwarded. I've explored the following options: Using stack ...

angulartypescript

Utilizing the compilerOptions: paths setting does not yield desired results when working with Node

Similar to this related question, but with unique aspects when utilizing node: $ tree . . ├── src │ ├── main.ts │ └── utils │ └── myUtils.ts └── tsconfig.json I am attem ...

node.jstypescripttsconfig

Executing a Prisma query with a selection

My Prisma models involve User, Car, and Reservation entities: model User { id String @id @default(auto()) @map("_id") @db.ObjectId name String? email String? @unique emailVerified DateTime? image ...

reactjstypescriptnext.jsprisma

Encountering a ReactJs and TypeScript error: "menuItems.map is not a function, issue with map method"

Greetings! I am currently working on implementing the logic of using useState and mapping an array to show only one dropdown item at a time. Below is my array structure with tags (menu name, links (to router), icon (menu icon), and if there are dropdown i ...

javascriptreactjstypescript

Different Approaches for Handling User Interactions in Angular Instead of Using the Deferred (Anti-?)Pattern

In the process of developing a game using Angular, I have implemented the following mechanics: An Angular service checks the game state and prompts a necessary user interaction. A mediator service creates this prompt and sends it to the relevant Angular c ...

javascriptangulartypescriptpromisedeferred