Question

0

290

Vistas

How to use JavaScript files in angular

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

Here is the file structure

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

7 months ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

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

7 months ago · Juan Pablo Isaza Denunciar

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.

7 months ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-03T09:23:54.435Z

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