Use of third-party JS libary with typings in Ionic2 project

Ionic Framework ionic-v3
1

Hello, I am trying to use cal-heatmap in my Ionic2 TypeScript project. I ran tsd, npm install the typings and library. What would I have to include in the autogenerated webpack.config.js and tsconfig.json in order to be able to use this library in my project’s TypeScript component?

cal-heatmap depends on d3 - which itself works with a mere import * as d3 from 'd3'; out of the box but I am unable to properly import/instantiate anything from cal-heatmap in my code.

I am fairly new to ES6-style module loading etc. so it’s a bit confusing why d3 works - but cal-heatmap not when they are supposedly “packaged” the same way.

Thanks,

David

2

Add the ts.d file to the files list in your tsconfig.json file.

3

Thanks, I don’t think that’s the reason. The standard webpack.config.js only excludes the node_modules directory, everything else, including the *.d.ts files is compiled anyway. I posted the question to SO as well by the way since it’s maybe more of a webpack/TypeScript question.

4

The default tsconfig.json file only includes app.ts.

Since it is aware that app.ts needs to be resolved, it also resolves every import to that file. Since your d.ts file is not imported it will not process that file, and it will have to be done separately.

tsconfig.json does not accept globs by default, so the only way to handle resolution is by individually including each file that isn’t reference by app.ts (or one of its dependencies).

5

Hi, thanks again.

I did as advised, see below but it does not change the outcome. I still get run-time errors in the browser about cal-heatmap stuff not being found. If I am not mistaken typing information is only needed at compile time but does not change runtime behaviour. As I mentioned, the very same same tsconfig.json works for instance for the d3 libary so the issue is somewhere else :-/

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "noEmitOnError": false,
    "rootDir": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "sourceRoot": "",
    "inlineSourceMap": false,
    "inlineSources": false,
    "listFiles": true
  },
  "files": [
    "typings/tsd.d.ts",
    "app/app.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false
}
6

Actually, it works in the end. The typings are of no use in this case unfortunately. I just let webpack pack everything from node_modules (including cal-heatmap) and in my code I do:

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

I include a link to my answer on SO.

7

Hello,

The approach I mentioned in the above response worked before it was decided to switch the default build system to RollUp.

I am unable to get the cal-heatmap library to work inside my Ionic 2 rc-1 app when it’s bundled with RollUp. I think the main problem is that I need to de-activate Typescript type-checking.

My questions - after toiling around with this for an entire work day - are simple:

  1. What do I need to add to my RollUp build configuration to execute the equivalent of what I did in the webpack-based build?
  2. If it’s not possible, how to I plug the exact same webpack configuration into my build?

This is the webpack.config.js I used before:

var path = require('path');


module.exports = {
  devtool: 'source-map',
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone'),
    path.resolve('app/app.ts')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: true // show module paths in the bundle, handy for debugging
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          'doTypeCheck': false
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /zone\.js(\/|\\)dist(\/|\\)zone/
    ]
  },
  resolve: {
    alias: {
      'angular2': path.resolve('node_modules/angular2')
    },
    extensions: ["", ".js", ".ts"]
  }
};

Thanks!

8

Actually, it kind of works now, my www must have been kind of stale. I installed the app-scripts as described here and webpack does its thing to miraculously include the JS from cal-heatmap in the apps main.js

Big question however - where are the source maps? I added: devtool: 'source-map', to the webpack.config.js but it doesn’t do anything - also, how to I add awesome-typescript loader etc?

Thanks.