angular中JavaScript文件的使用方法

Question

我正在尝试将 javascript function 调用到 angular 中，这是我正在使用的插件“npm I global payments-3ds”，其中我从 node_modules 复制了 javascript 文件并尝试调用我的组件

下面是例子：

 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) } }

我正在尝试调用 handleInitiateAuthentication() 这给了我以下错误

这是文件结构

从 index.d.ts 我调用 handleInitiateAuthentication() function

这是相同的 Stackblitz 代码

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

请帮助我从未在 angular 中使用过 js function 我试图添加无效的资产 我试图创建一个 angular 库并在其中添加 js 文件并更新 package，方法是将文件转换为 .tgz 但没有任何工作显示总是一样的错误，

我为什么要做的是我必须更新 node_modules 中的一个文件，基本上我想更改节点模块中的文件，这就是我在本地复制这些文件的原因

这也给出了错误

Answer 1

您不需要导入这样的库。 首先将库安装到您的项目中：

npm i globalpayments-3ds --save

然后在你的 ts 文件中：

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

看到这个堆栈闪电战

Answer 2

您必须直接导入 js 文件。

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

关于模块的错误，是因为你必须在 TypeScript 中定义模块的类型。你可以直接使用// @ts-ignore 。

看到这个 stackblitz： https://stackblitz.com/edit/angular-xz4kmp?file=src%2Fapp%2Fapp.component.ts

Answer 3

从开源库制作您自己的修改版本的推荐方法是分叉它们并构建您自己的版本。

另请注意，您必须考虑 NPM package 的许可证，在https://github.com/globalpayments/globalpayments-js的情况下，它是 GPL-v2，因此如果您将其用于商业目的，则必须遵循协议。 检查这个分支： GNU General Public License (v2): Can a company use the licensed software for free? .

查看您的 Stackblitz 代码，您可能会注意到src/app/global-payments-3ds/文件夹中有多个相同模块的 JS 版本：

• globalpayments-3ds.js （CommonJS，用于 Node 环境）。
• globalpayments-3ds.min.js （CommonJS 缩小版）。
• globalpayments-3ds.js.map （CommonJS 缩小 map 文件以在调试期间参考）。
• globalpayments-3ds.esm.js （ESM，ECMA 标准模块）。
• ...

要在 Angular 应用程序中使用外部 JS 模块，因为它是 JavaScript 而不是 TypeScript，您必须告诉 TypeScript 编译器您希望通过在项目根目录的tsconfig.ts文件中启用allowJS: true来允许 JS 模块。

之后你应该可以在你的 Angular 应用程序中导入 ESM 版本（ globalpayments-3ds.esm.js ），或者如果你想使用 CommonJS 版本，你也可以在tsconfig.ts中启用esModuleInterop: true以允许导入项目中的 CommonJS/AMD/UMD JS 模块，例如globalpayments-3ds.js 。