Question

我试图在我的有角度的项目中使用this javascript library，但是我无法成功导入它。

该库的主文件是dist/index.js，它具有以下一个构造函数定义：

window.ConfettiGenerator = function(params) {
//....
}

我面临的问题是，当我尝试导入该库并在组件中使用它时，出现以下错误：

错误TypeError： confetti_js__WEBPACK_IMPORTED_MODULE_1 __。ConfettiGenerator不是构造函数

这是我使用图书馆的方式：

import * as confettijs from "confetti-js";

//...

  ngOnInit() {
    let confettiSettings = {/* ... */};
    let confetti = new confettijs.ConfettiGenerator(confettiSettings);
    confetti.render();
  }

由于该库不是@types包的一部分，因此我在src/typings.d.ts中声明了它，但无法成功使用它：

declare module 'confetti-js';

感谢您的帮助

Answer 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();
  }
}

导入未在@types

1 个答案: