Aurelia CLI can't import chart.js TypeScript

1
votes

I'm using typescript with aurelia/aurelia-cli. I've npm installed chart.js and added it to my aurelia.json file:

"dependencies": [
      ...
      {
        "name": "chartjs",
        "path": "../node_modules/chart.js/dist",
        "main": "Chart"
      },
]

I've also ran typings:

typings install dt~chart.js --global --save

Now I'm trying to import it in one of my components

import * as Chart from 'chartjs'

But I get the error:

Cannot find module 'chartjs'.

I've also tried:

... from 'chart'
... from 'Chart'
... from 'Chart.js'
... from 'chartjs'
import * as chart ...
import * as chartjs ...
3
typescriptaurelia

3 Answers

1
votes

Have you tried declaring an empty module? e.g in a declaration file like index.d.ts, add:

declare module "chart.js";

I find this is a good starting point for importing 3rd party libraries. Further info can be found here: https://www.typescriptlang.org/docs/handbook/modules.html#working-with-other-javascript-libraries

If there are no errors and you can use the plain js chart.js functions, it means that the library has been included but the types have not.

Also if you are using Typescript 2.0 I think you should be installing the types like this:

npm install --save @types/chartjs
1
votes

I was able to make it work by changing my import and aurelia.json file.

aurelia.json

{
    "name": "chartjs",
    "path": "../node_modules/chart.js/dist/Chart.min"
},

import statement

import 'chartjs';
0
votes

I know Chart.js works with Aurelia as we use it in one of our demo apps for workshops. In the demo app it is imported like this: import Chart from 'chartjs'; but that is ES2015, not TypeScript.

Also, the configuration should look like this in aurelia.json:

      {
        "name": "chartjs",
        "path": "../node_modules/chart.js/Chart.min",
        "exports": "Chart"
      }