Как использовать файлы JavaScript в angular
Я пытаюсь вызвать функцию javascript в angular, вот плагин, который я использую «npm I global Payments-3ds», из которых я скопировал файлы javascript из node_modules и попытался вызвать свой компонент
Ниже приведен пример:
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()
Вот код Stackblitz для того же
https://stackblitz.com/edit/angular-vodezz?file=src%2Fapp%2Fapp.component.ts
Пожалуйста, помогите, я никогда не использовал функцию js в angular, я пытался добавить активы, но это не сработало. Я попытался создать библиотеку angular и добавить в нее файлы js и обновить пакет, преобразовав файл в .tgz, но ничего не работает, он всегда показывает одну и ту же ошибку,
Почему я это делаю, мне нужно обновить один из файлов из node_modules, в основном я хочу изменить файлы из модулей узлов, поэтому я скопировал эти файлы локально
Вы можете либо добавить его в скрипты в angular.json, либо указать псевдоним: import * as myFile from 'myFile'; и тогда вы можете называть его как myFile.myFunction
@SamySammour, я пробовал, не работает, если я скопирую его локально из пакета
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вам не нужно импортировать такую библиотеку. Прежде всего установите библиотеку в свой проект:
npm i globalpayments-3ds --save
затем в вашем ts-файле:
import { handleInitiateAuthentication } from 'globalpayments-3ds';
см. этот стекблиц
./globalpayments-3ds/globalpayments-3ds.esm.js, но в строке импорта отображается ошибка
Не удается найти модуль './globalpayments-3ds/globalpayments-3ds.esm.js' или его соответствующие объявления типа. (2307 Это ошибка, но это работает
@vinuta обновил ответ.
Я не хочу использовать пакет напрямую, так как мне нужно обновить пакет, поэтому я беру его локальную копию и обновляю в одном из файлов и вызываю функцию в своем компоненте.
Вы должны импортировать напрямую файл js.
// @ts-ignore
import { handleInitiateAuthentication } from './globalpayments-3ds/globalpayments-3ds.esm.js';
Ошибка в модуле связана с тем, что вы должны определить тип вашего модуля в TypeScript. Вы можете напрямую использовать // @ts-игнорировать.
См. этот stackblitz: https://stackblitz.com/edit/angular-xz4kmp?file=src%2Fapp%2Fapp.component.ts
Не удается найти модуль './globalpayments-3ds/globalpayments-3ds.esm.js' или его соответствующие объявления типа. (2307 Это ошибка, отображаемая в строке импорта, но это работает
Ответ отредактирован, у вас есть другие решения здесь: stackoverflow.com/questions/64732623/…
Рекомендуемый способ создания собственных модифицированных версий из библиотек с открытым исходным кодом — разветвить их и создать собственные версии.
Также обратите внимание, что вы должны учитывать лицензию этого пакета NPM, которая в случае https://github.com/globalpayments/globalpayments-js является GPL-v2, поэтому, если вы будете использовать его в коммерческих целях, вы должны следовать соглашению. Проверьте эту ветку: Стандартная общественная лицензия GNU (v2): может ли компания использовать лицензионное программное обеспечение бесплатно?.
Взглянув на ваш код Stackblitz, вы можете заметить, что в папке src/app/global-payments-3ds/ есть несколько версий JS одного и того же модуля:
globalpayments-3ds.js(CommonJS, используется в средах Node).globalpayments-3ds.min.js(уменьшенный CommonJS).globalpayments-3ds.js.map(минимизированный файл карты CommonJS для ссылки во время отладки).globalpayments-3ds.esm.js(ESM, стандартный модуль ECMA).- ...
Чтобы использовать внешний модуль JS в приложении Angular, поскольку это JavaScript, а не TypeScript, вы должны сообщить компилятору TypeScript, что вы хотите разрешить модули JS, включив allowJS: true в tsconfig.ts файле в корне проекта.
После этого вы сможете импортировать версию ESM (globalpayments-3ds.esm.js) в свое приложение Angular, или, если вы хотите использовать версию CommonJS, вы также можете включить esModuleInterop: true в tsconfig.ts, чтобы разрешить импорт модулей CommonJS/AMD/UMD JS в ваш проект. , как globalpayments-3ds.js.
Вы не должны изменять файлы внутри
node_modules. Что такого не так с используемым вами пакетом, что вам нужно его модифицировать? На мой взгляд, хороший способ сделать что-то подобное — просто разветвить репозиторий, внести туда свои изменения и установить пакет npm из своего форка github. Взгляните на этот вопрос для более подробной информации об этом методе.