ng2-charts\ng2-charts.js 不导出 ChartsModule答案

【问题标题】：ng2-charts\ng2-charts.js does not export ChartsModuleng2-charts\ng2-charts.js 不导出 ChartsModule
【发布时间】：2017-02-23 05:41:35
【问题描述】：

我正在尝试使用 NG2-Charts (http://valor-software.com/ng2-charts/) 的基本示例

我复制粘贴了 HTML 部分

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

和 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;
 */
 }

我运行 npm install ng2-charts --save，npm install chart.js --save

我还在 app.module.ts 中导入 ChartsModule

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

After importing ChartsModule I am getting an error that ng2-charts\ng2-charts.js does not export ChartsModule. Click to view the image of an error

有没有人知道如何解决这个问题？谢谢

【问题讨论】：

请在他们的 github 上查看关于 issue #440 的以下答案。
仍然无法正常工作。它还显示错误“无法绑定到‘数据集’，因为它不是‘画布’的已知属性”
您是否使用 angular-cli 创建了项目？如果是这样，在 angular-cli.json 文件的“脚本”部分中，尝试添加：“../node_modules/chart.js/src/chart.js”

标签： javascript angular ionic2 chart.js ng2-charts

【解决方案1】：

cmets中的第二期

它还显示“无法绑定到‘数据集’的错误，因为它不是“画布”的已知属性

可能是因为没有将 ChartsModule 导入到渲染图表的模块中。

我遇到了同样的初始问题，并且能够通过将以下内容添加到我的汇总配置文件中来解决它

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()
]

这个库的文档本来可以更好的。

希望这篇文章可以帮助遇到类似问题的人

【讨论】：

链接失效