When incorporating @pokusew/pcsclite into an Angular2/Electron project, a TypeError is triggered

In my Electron project with Angular CLI, I am attempting to implement NFC functionality by incorporating the @pokusew/pcsclite library in one of my components. I am using 

import * as pcsclite from "../../node_modules/@pokusew/pcsclite"
to import the library. However, when I try to execute this.pcsc = pcsclite(), I encounter the error message below in the console:

TypeError: exists is not a function

Additionally, I receive the following warning during the build process:

WARNING in ./~/bindings.js

Critical dependency: the request of a dependency is an expression

angulartypescriptelectronpcsc

Answer №1

If you encounter the 

TypeError: exists is not a function
, it may be due to a bug in the node-bindings module. Check out more details on this issue at: https://github.com/TooTallNate/node-bindings/pull/20

The issue is expected to be resolved with the next release available on NPM.

However, even after this fix, the @pokusew/pcsclite might still face issues when used with AngularCLI/Webpack. To make it compatible in this setup, you would need to switch to using node-loader instead of node-bindings to load the binding file. Here is how you can make the change:

Locate the file "/node_modules/@pokusew/pcsclite/package.json":

"dependencies": {
  "bindings": "github:tootallnate/node-bindings#pull/20/head", < Replace this line with,
  "node-loader": "^0.6.0", << use this instead
  "nan": "^2.5.1"
},

Next, navigate to "/node_modules/@pokusew/pcsclite/lib/pcsclite.js"

const pcsclite = require('node-loader!./../build/Release/pcsclite.node');

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

Angular is programmed to actively monitor the status of elements for enabling or

Seeking a solution to determine if an element is disabled in an Angular directive. Have attempted with host listeners, but no success yet. Directive: @HostBinding('attr.disabled') isDisabled : boolean; @HostListener("disabled") disabled() { ...

angularangular2-directives

What are the differences between Modules and Typings in Typescript?

I have been searching far and wide for information on the variances between modules and typings in TypeScript, but I'm still struggling to grasp the concept. As a newcomer to TypeScript, could someone please provide a concise explanation of these diff ...

typescript

Unable to assign a value to the HTMLInputElement's property: The input field can only be set to a filename or an empty string programmatically

When attempting to upload an image, I encountered the error message listed in the question title: This is my template <input type="file" formControlName="avatar" accept=".jpg, .jpeg .svg" #fileInput (change)="uploa ...

javascripthtmlcssangulartypescript

Tips for setting unique base_url for separate environment instances in angular2

My index.html file in Angular2 has the following content: When I build it in default mode (development mode) using npm run build, I want it to have: <base href="/"> However, when I build it in production mode (npm run build --target=production), I ...

angularangular2-routing

A guide on implementing radio buttons in Angular 2 and sending the selected value via a HTTP post request

As a newcomer to Angular 2, I am struggling with the following code: Here is my HTML <form action="POST" (submit)="register()" class="aa-login-form"> <input type="radio" [(ngModel)]="gender" name="sex" value="MALE"> Male <input ...

htmltypescriptangularradio-button

What is the best way to access a particular value within a nested array in Angular?

As someone new to programming, I'm facing a challenge with one of my school projects. I have a JSON nested array that I got from my ASP.Net API, and I'm trying to extract the speakerID value from this array and add it to another array using Angul ...

arraysangular

Error message: In the combination of NextJs and Redux, an issue has occurred where the program is unable to access properties of null, specifically in

I am just getting started with Next and redux, but I am facing an issue. https://i.sstatic.net/CZTO2.png The error shown above occurs when trying to select a redux value from the store. I have attempted using raw useSelector from redux toolkit, but it s ...

reactjstypescriptnext.jsredux

Tips for resolving the issue where a radio group in Angular does not impact other items

Here's the code list.component.html <form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()"> <div nz-row *ngFor="let remark of checklis> <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="pad ...

angulartypescriptforms

"Customize your Angular application by updating the background with a specified URL

Hello there, I've been attempting to modify the background URL once a button is clicked. In my CSS, I have the following default style set up. .whole-container { background: linear-gradient( rgba(0, 0, 0, 2.5), ...

htmlcssangular

Remove all input fields within an HTML file using a TypeScript method implemented in an Angular 2 component

Within my Angular project, there are several input elements in the HTML file that are not enclosed within a form tag. I am looking to create a function in the TypeScript file that will clear all of these inputs. I attempted to utilize ViewChild, but it a ...

angulartypescript

stop angular from infinitely loading component

When dynamically loading a component into a dynamic position, I am facing an issue with using selector: 'td' since the component is a table row and I need to apply colspan to the dynamically added row before loading the dynamic component. The pre ...

angularrecursionangular-dynamic-components

Conditional types can be used as type guards

I have this simplified code snippet: export type CustomType<T> = T extends Array<unknown> ? {data: T} : T; function checkAndCast<T extends Array<unknown>>(value: CustomType<T>): value is {data: T} { return "data" ...

typescript

Difficulties setting up TypeScript in Laravel, alongside Vuejs and Inertia

Currently, my tech stack includes Laravel, Vue, and Inertia. However, I am looking to migrate everything to TypeScript, and I have encountered a roadblock that I can't seem to overcome. To aid me in this process, I referred to the following video tuto ...

phptypescriptlaravelvue.jsinertiajs

Transform angularjs directive into angular 10

After stumbling upon this intriguing code snippet, I decided to integrate it into my angular project: 'use strict'; /** * A mesmerizing floating text animation */ angular.module('g1b.text-animation', []). directive('textAnimatio ...

angularjsangularangularjs-directiveangular-directive

arrange the elements in an array list alphabetically by name using the lodash library

Is there a way to alphabetically sort the names in an array list using JavaScript? I attempted to achieve this with the following code: const sample = [ { name: "AddMain", mesg: "test000" }, { name: "Ballside", ...

javascripttypescriptlodash

Storing Angular header values in local storage

saveStudentDetails(values) { const studentData = {}; studentData['id'] = values.id; studentData['password'] = values.password; this.crudService.loginstudent(studentData).subscribe(result => { // Here should be the val ...

angulartypescriptwebangular7

Angular 9 does not update Bootstrap 4 colors

I created a custom scss file called modified-bootstrap.scss to customize bootstrap variables $theme-colors: ( "primary": #84329b, "secondary": #02bceb ); @import "node_modules/bootstrap/scss/bootstrap.scss"; // also tried using a relative path Next, ...

angulartwitter-bootstrapsassbootstrap-4angular9

Get the most recent two files from a set

I am currently facing a challenge in retrieving the first 2 documents from a collection in google cloud firestore. My current approach involves using the timestamp of the latest document and then calculating the time range to fetch the desired documents. l ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-firestoregoogle-cloud-functions

Using Typescript to create a union of functions

There are two different types of functions: one that returns a string and the other that returns a Promise<string>. Now, I am looking to create a function that can wrap both types, but I need to be able to distinguish between them when invoking the f ...

typescript

How can I combine multiple styles using Material-UI themes in TypeScript?

There are two different styles implementations in my code. The first one is located in global.ts: const globalStyles = (theme: Theme) => { return { g: { marginRight: theme.spacing(40), }, } } export const mergedStyle = (params: any) ...

javascriptreactjstypescriptmaterial-uithemes