Импортировать внешнюю библиотеку javascript, которая не указана в @types
Я пытаюсь использовать эта библиотека javascript в своем проекте angular, но мне не удалось его успешно импортировать.
Главный файл библиотеки — dist/index.js, и у него есть одно определение конструктора:
window.ConfettiGenerator = function(params) {
//....
}
Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь импортировать эту библиотеку и использовать ее в своем компоненте, у меня возникает следующая ошибка:
ERROR TypeError: confetti_js__WEBPACK_IMPORTED_MODULE_1__.ConfettiGenerator is not a constructor
Вот как я использую библиотеку:
import * as confettijs from "confetti-js";
//...
ngOnInit() {
let confettiSettings = {/* ... */};
let confetti = new confettijs.ConfettiGenerator(confettiSettings);
confetti.render();
}
Поскольку эта библиотека не является частью пакета @типы, я объявляю ее в src/typings.d.ts, но не могу ее использовать:
declare module 'confetti-js';
Спасибо за помощь
Я пробовал это, но в итоге получил ошибку, что это не функция.
Почему бы просто не использовать let confetti = window.ConfettiGenerator(confettiSettings);?
Я только что попробовал, но у меня была эта ошибка: TypeError: cv.getContext is not a function
Итак, я зашел на страницу, на которую вы ссылаетесь, и на ней есть инструкции, как это сделать. Вы пробовали просто следовать им?
Да, конечно, я пытался с помощью простого импорта import "confetti-js";, а затем вызывал функцию с помощью new ConfettiGenerator(confettiSettings);, но у меня была неизвестная ошибка конструктора
Оказывается, ошибка TypeError: cv.getContext is not a function связана с плохой конфигурацией, которую я не заметил. Как вы предложили, я использовал new (<any> window).ConfettiGenerator(confettiSettings);, и он работал нормально (я добавил приведение к any, чтобы избежать ошибок компиляции). Вы можете добавить это как ответ, чтобы я мог принять его.
Ответы 1
Библиотека экспортируется через глобальную переменную, поэтому вы не можете импортировать, как положено. Попробуйте следующее
добавить библиотеку в массив скриптов в angular.json
"scripts": [ "node_modules/confetti-js/dist/index.min.js" ]компонент
import { Component } from '@angular/core'; declare var ConfettiGenerator: any; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; ngOnInit(){ var confettiSettings = { target: 'my-canvas' }; var confetti = new ConfettiGenerator(confettiSettings); confetti.render(); } }
Он говорит, что это не конструктор, поэтому не используйте
new.