在Typescript Angular 2项目中使用通过npm安装的JS库

Question

我无法在用TypeScript编写的Angular2项目中使用cal-heatmap。任何关于如何进行这项工作的帮助都将不胜感激。

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

import * as calheatmap from 'cal-heatmap';

但是，当我在浏览器中打开应用程序时，calheatmap仍然是未定义的，并且没有导入任何内容。该库是基于d3的，并且d3本身可以工作。使用相同的包安装过程，下面的代码就可以在我的应用程序中运行：

    import * as d3 from 'd3';

我怀疑cal-heatmap不工作是因为它的JS code (来自NPM)或ts.d不兼容，但我不知道如何解决这个问题。

如有任何提示，我们将不胜感激，谢谢！

Answer 1

我也遇到过类似的事情。

https://github.com/wa0x6e/cal-heatmap/issues/192

不过，我使用的是systemjs。有趣的是，CalHeatMap对象在浏览器中加载得很好，但没有加载到组件中。

我像那样导入了d3js和c3js，它们加载得很好。我注意到的一件事是，其他库将函数保存在一个对象中(即d3js中的d3 )；而在cal heatmap中，它们返回一个函数(如果你查看source-code内部，就会发现CalHeatMap实际上是一个函数)。

Answer 2

好的，所以我让它起作用了。不要管cal-heatmap模块的类型。它们不会导出任何内容，所以在这种情况下没有用处。不需要安装。

然后，您可以执行以下操作：

import * as CalHeatMap from 'cal-heatmap';
...
new CalHeatMap().init({});

在此之前，我尝试不实例化n00b而直接在CalHeatMap上调用init。

Answer 3

如果您将cal-heatmap与Webpack4捆绑在一起，由于cal-heatmap.js中的全局变量，我还需要像这样使用Webpack ProvidePlugin：

    new webpack.ProvidePlugin({
        CalHeatMap: "cal-heatmap"
    })

否则我会在运行时看到这个错误：

Uncaught ReferenceError: CalHeatMap is not defined
 at Module../src/app/js/myapp.js