时间戳

首页 > 解决方案 > 导入未在@types 中列出的外部 javascript 库

angular - 导入未在@types 中列出的外部 javascript 库

问题描述

我正在尝试在我的 Angular 项目中使用这个 javascript 库，但我无法成功导入它。

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

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

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

错误类型错误：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';

谢谢您的帮助

标签： angulartypescripttypescript-typings

解决方案

通过全局变量导出的库，因此您不能像您的方式那样导入。尝试以下

  • 将库添加到 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();
  }
}

推荐阅读