Using JS library installed via npm in Typescript A

Question

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.

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';

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';

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!

Answer 1

Ok, so I got this to work. Never mind the typings for the cal-heatmap module. They don't export anything so there are not useful in this case. No need to install.

You can then do:

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

Before, I was trying to call init directly on CalHeatMap without instantiating, kind of n00b.

Answer 2

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

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

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).