0
473
VistasCómo usar archivos JavaScript en angular
Estoy tratando de llamar a la función javascript en el angular. Aquí está el complemento que estoy usando "npm I pagos globales-3ds", del cual copié archivos javascript de node_modules e intenté llamar a mi componente.
A continuación se muestra el ejemplo:
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) } } Estoy tratando de llamar a handleInitiateAuthentication() que me está dando el siguiente error 
Aquí está la estructura del archivo.
desde index.d.ts estoy llamando a la función handleInitiateAuthentication()
Aquí está el código Stackblitz para el mismo
https://stackblitz.com/edit/angular-vodezz?file=src%2Fapp%2Fapp.component.ts
Por favor, ayuda. Nunca usé la función js en angular. Intenté agregar activos que no funcionaron. Intenté crear una biblioteca angular y agregar los archivos js y actualizar el paquete, convirtiendo el archivo a .tgz pero no se muestra nada. siempre el mismo error,
¿Por qué tengo que actualizar uno de los archivos de node_modules? Básicamente, quiero cambiar los archivos de los módulos de nodo, por lo que copié esos archivos localmente.
esto tambien esta dando error 
3 Respuestas
Responde la pregunta0
No es necesario importar una biblioteca como esa. En primer lugar, instale la biblioteca en su proyecto:
npm i globalpayments-3ds --save
luego en su archivo ts:
import { handleInitiateAuthentication } from 'globalpayments-3ds';
ver este stackblitz
0
Tienes que importar directamente el archivo js.
// @ts-ignore import { handleInitiateAuthentication } from './globalpayments-3ds/globalpayments-3ds.esm.js';Para el error sobre el módulo, es porque tiene que definir el tipo de su módulo en TypeScript. Puede usar directamente // @ts-ignore .
Vea este stackblitz: https://stackblitz.com/edit/angular-xz4kmp?file=src%2Fapp%2Fapp.component.ts
0
La forma recomendada de crear sus propias versiones modificadas a partir de bibliotecas de código abierto es bifurcarlas y crear sus propias versiones.
También ten en cuenta que debes tener en cuenta la licencia de ese paquete NPM que en el caso de https://github.com/globalpayments/globalpayments-js es GPL-v2, por lo que si lo utilizarás con fines comerciales debes seguir las convenio. Consulte esta rama: GNU General Public License (v2): ¿una empresa puede usar el software con licencia de forma gratuita? .
Echando un vistazo a su código Stackblitz , puede notar que hay varias versiones JS del mismo módulo en la carpeta src/app/global-payments-3ds/ :
-
globalpayments-3ds.js(CommonJS, utilizado en entornos Node). -
globalpayments-3ds.min.js(CommonJS minimizado). -
globalpayments-3ds.js.map(archivo de mapa minimizado de CommonJS para hacer referencia durante la depuración). -
globalpayments-3ds.esm.js(ESM, módulo estándar ECMA). - ...
Para usar un módulo JS externo en una aplicación Angular, ya que es JavaScript y no TypeScript, debe decirle al compilador de TypeScript que desea permitir los módulos JS habilitando allowJS: true en el archivo tsconfig.ts en la raíz del proyecto.
Después de eso, debería poder importar la versión ESM ( globalpayments-3ds.esm.js ) en su aplicación Angular, o si desea usar la versión CommonJS, también puede habilitar esModuleInterop: true en tsconfig.ts para permitir la importación Módulos CommonJS/AMD/UMD JS en su proyecto, como globalpayments-3ds.js .