1

I am trying to call the javascript function into the angular here is the plugin I am using "npm I global payments-3ds" of which I copied javascript files from node_modules and tried to call in my component

Below is the example :

import {
  Component,
  OnInit
} from '@angular/core';
import {
  handleInitiateAuthentication
} from './globalpayments-3ds/types/index';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';

  ngOnInit(): void {
    const status: any = "CHALLENGE_REQUIRED"
    const resp = {
      challenge: {
        encodedChallengeRequest: "abcd",
        requestUrl: "url,
      },
      challengeMandated: "MANDATED",
      dsTransactionId: "44444",
      id: "444444",
      status: status,
    };
    const windowSize: any = "WINDOWED_600X400";
    const displayMode: any = "lightbox";

    const challengeWindow = {
      windowSize: windowSize,
      displayMode: displayMode,
    };
    handleInitiateAuthentication(resp, challengeWindow)
  }
}

I am trying to call the handleInitiateAuthentication() which is giving me the below error enter image description here

Here is the file structure

enter image description here

from index.d.ts i am calling the handleInitiateAuthentication() function

Here is Stackblitz code for the same

https://stackblitz.com/edit/angular-vodezz?file=src%2Fapp%2Fapp.component.ts

Please help I never used the js function in angular I tried to add in assets not worked I have tried to create an angular library and add the js files in it and update the package, by converting the file to .tgz but nothing working it showing always the same error,

Why am I doing is I have to update one of the files from node_modules, basically I wanna change files from node modules which is why i copied those files locally

this is also giving error enter image description here

Improve this question
3
  • You should not want to change files inside the node_modules. What's so wrong with the package that you are using so that you need to modify it? In my opinion, a good way to go about doing something like this is just fork the repository, do your changes there, and install the npm package from your github fork. Take a look at this question for more details about this method. Commented Mar 18, 2022 at 8:19
  • You can either add it to the scripts in the angular.json or give an alias: import * as myFile from 'myFile'; and then you can call it like myFile.myFunction Commented Mar 18, 2022 at 8:20
  • @SamySammour i tried it not working if i copy it locally from the package Commented Mar 18, 2022 at 8:34

3 Answers 3

Reset to default
1

You have to import directly js file.

// @ts-ignore 
    import { handleInitiateAuthentication } from './globalpayments-3ds/globalpayments-3ds.esm.js';

For error about module, it's because you have to define type of your module in TypeScript. You can directly use // @ts-ignore.

See this stackblitz : https://stackblitz.com/edit/angular-xz4kmp?file=src%2Fapp%2Fapp.component.ts

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Cannot find module './globalpayments-3ds/globalpayments-3ds.esm.js' or its corresponding type declarations.(2307 This is an error shwoing on import line but this is working
Answer edited, you have others solutions here : stackoverflow.com/questions/64732623/…
0

You don't need to import a library like that. First of all install the library to your project:

npm i globalpayments-3ds --save

then in your ts file:

import { handleInitiateAuthentication } from 'globalpayments-3ds';

see this stackblitz

Improve this answer

4 Comments

./globalpayments-3ds/globalpayments-3ds.esm.js but its showing an error on the import line
Cannot find module './globalpayments-3ds/globalpayments-3ds.esm.js' or its corresponding type declarations.(2307 This is error but this is working
stackblitz.com/edit/… still showing the same error, its not taking the path correctly
I don't want to use the package directly as I need to update the package which is why I am taking the copy of it in local and updating in one of the files and calling the function in my component
0

The recommended way to make your own modified versions from open source libraries is to fork them and build your own versions.

Also note that you must take into account the license of that NPM package which in the case of https://github.com/globalpayments/globalpayments-js is GPL-v2, so if you will use it for commercial purposes you must follow the agreement. Check this branch: GNU General Public License (v2): can a company use the licensed software for free?.

Taking a look to your Stackblitz code, you may notice that there are several JS versions of the same module in src/app/global-payments-3ds/ folder:

  • globalpayments-3ds.js (CommonJS, used in Node environments).
  • globalpayments-3ds.min.js (CommonJS minified).
  • globalpayments-3ds.js.map (CommonJS minified map file to reference during debugging).
  • globalpayments-3ds.esm.js (ESM, ECMA Standard Module).
  • ...

To use an external JS Module in an Angular App, as it is JavaScript and not TypeScript, you must tell TypeScript Compiler that you want to allow JS modules by enabling allowJS: true in tsconfig.ts file at the root of the project.

After that you should be be able to import the ESM version (globalpayments-3ds.esm.js) in your Angular App, or if you want to use the CommonJS version, you can also enable esModuleInterop: true in tsconfig.ts to allow importing CommonJS/AMD/UMD JS modules in your project, like globalpayments-3ds.js.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.