Ng2-charts \ ng2-charts.js does not export ChartsModule

Question

I am trying to use the basic NG2-Charts example ( http://valor-software.com/ng2-charts/ )

I copied the pasted part of the HTML

<div style="display: block"> <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> 

and part of TypeScript

 public barChartOptions:any = { scaleShowVerticalLines: false, responsive: true }; public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010','2011', '2012']; public barChartType:string = 'bar'; public barChartLegend:boolean = true; public barChartData:any[] = [ {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}, {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'} ]; // events public chartClicked(e:any):void { console.log(e); } public chartHovered(e:any):void { console.log(e); } public randomize():void { // Only Change 3 values let data = [ Math.round(Math.random() * 100), 59, 80, (Math.random() * 100), 56, (Math.random() * 100), 40]; let clone = JSON.parse(JSON.stringify(this.barChartData)); clone[0].data = data; this.barChartData = clone; /** * (My guess), for Angular to recognize the change in the dataset * it has to change the dataset variable directly, * so one way around it, is to clone the data, change it and then * assign it; */ } 

I run npm install ng2-charts --save, npm install chart.js --save

I also import ChartsModule in app.module.ts

 import { ChartsModule } from 'ng2-charts/ng2-charts'; @NgModule({ imports: [ChartsModule] }) 

After importing the ChartsModule, I get an error that ng2-charts \ ng2-charts.js is not exporting the ChartsModule. Click to view error image

Anyone have any ideas how to fix this? thanks

Answer 1

The second problem in the comments

An error is also displayed that "cannot snap to datasets" because it is not a known property of the "canvas"

probably due to the fact that it does not import the ChartsModule into the module that displays the chart.

I came across the same initial release and was able to get past it by adding the following to my rollup-config configuration file

 plugins: [ nodeResolve({jsnext: true, module: true}), commonjs({ include: ['node_modules/rxjs/**','node_modules/ng2-charts/**'], namedExports: {'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']} }), uglify() ] 

The documentation for this library could be better. I ran into several other problems that I registered at http://spartansoft.net/installing-ng2-charts-for-an-angular-4-project/

I hope the message can help anyone who encounters similar problems.

Answer 2

For version of Angular 7 or higher

npm install ng2-charts@2.2.3 --save

npm install chart.js --save