使用通过npm在Typescript Angular 2项目中安装的JS库 [英] Using JS library installed via npm in Typescript Angular 2 project

问题描述

在我编写的Angular2项目中，我无法使用 cal-heatmap TypeScript.对于如何实现这一目标的任何帮助，将不胜感激.

I don't manage to use cal-heatmap in my Angular2 project written in TypeScript. Any help on how to get this going would be appreciated.

我正在使用webpack( webpack.config.js )捆绑该应用程序.这是 ts.config .我安装了带有npm的cal-heatmap和带有tsd的类型定义.在我的应用程序的TypeScript代码中，我想要:

I am using webpack (webpack.config.js) to bundle the application. Here is the ts.config. I installed cal-heatmap with npm and type definitions with tsd. In my application's TypeScript code I would do like:

import * as calheatmap from 'cal-heatmap';

但是，当我在浏览器中打开应用程序时，calheatmap仍未定义且未导入任何内容.该库基于d3，而d3本身可以工作.使用相同的软件包安装过程，以下内容将在我的应用程序中起作用:

However, when I open the application in a browser calheatmap remains undefined and nothing is imported. The library is based on d3 and d3 itself works. Using the same package installation procedure the following just works inside my application:

    import * as d3 from 'd3';

我怀疑cal-heatmap无法正常工作，因为其

I suspect cal-heatmap does not work because its JS code (from NPM) or the ts.d are not compatible but I don't know how to remedy this.

任何提示将不胜感激，谢谢！

Any hints would are appreciated, thanks!

推荐答案

我遇到了类似的情况.
https://github.com/wa0x6e/cal-heatmap/issues/192

I ran into something similar.
https://github.com/wa0x6e/cal-heatmap/issues/192

虽然我正在使用systemjs.有趣的是CalHeatMap对象可以完美地加载到浏览器中，但是没有加载到组件中.

I was using systemjs though. Funny thing is the CalHeatMap object loaded perfectly in the browser, but didn't loaded in the component.

我像这样导入了d3js和c3js，它们完美地加载了. 我注意到的一件事是，其他库将功能保留在对象内部(即d3js中的d3)；而在cal-heatmap中，它们返回一个函数(如果您查看

I imported d3js and c3js like that and they loaded perfectly. One thing I noticed is that, the other libraries keep the functionalities inside an object(i.e d3 in d3js); whereas in cal-heatmap they're returning a function(CalHeatMap is actually a function if you look inside the source-code).

这篇关于使用通过npm在Typescript Angular 2项目中安装的JS库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！