Question

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

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

RewriteEngine on

RewriteCond %{THE_REQUEST} /\?abc=(.+?)/\?abc= [NC]
RewriteRule ^ /?abc=%1 [L,R=301]

但是，当我在浏览器import * as calheatmap from 'cal-heatmap';中打开应用程序时，仍然未定义且未导入任何内容。该库基于d3和d3本身可行。使用相同的软件包安装过程，以下内容仅适用于我的应用程序：

calheatmap

我怀疑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({});

之前，我试图直接在CalHeatMap上调用init而不实例化，类似于n00b。

Answer 3

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

void foo(std::integral_constant<unsigned int, 0>) {   
    consume_zero_i(i);
}

template<unsigned int i>
void foo(std::integral_constant<unsigned int, i>) {
    consume_positive_i(i);
    foo(std::integral_constant<unsigned int, i - 1>{});
}

否则，我会在运行时看到此错误：

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

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

3 个答案: