不能将 ng2-charts 与 Ionic 3 (ionic-angular 3.9.4) 一起使用

Question

所以我正在尝试为我的项目设置 ng2-charts，但是一旦我在 app.module.ts import 部分导入模块，它就会给我以下错误消息：

Uncaught TypeError: Object(...) is not a function
    at ng2-charts.js:230
    at Object.<anonymous> (ng2-charts.js:232)
    at __webpack_require__ (bootstrap 1f12d1e1e27208e77f22:54)
    at Object.286 (main.ts:5)
    at __webpack_require__ (bootstrap 1f12d1e1e27208e77f22:54)
    at Object.264 (main.ts:1)
    at __webpack_require__ (bootstrap 1f12d1e1e27208e77f22:54)
    at webpackJsonpCallback (bootstrap 1f12d1e1e27208e77f22:25)
    at main.js:

如果我们检查 ng2-charts.js 文件中的行 -

/** @nocollapse */ ThemeService.ngInjectableDef = defineInjectable({ factory: function ThemeService_Factory() { return new ThemeService(); }, token: ThemeService, providedIn: "root" });

我已经安装了 chart.js 并将其导入到 app.component.ts 文件中，如下所示 -

import '../../node_modules/chart.js/dist/Chart.bundle.min.js';
import '../../node_modules/chart.js/dist/Chart.min.js';

这就是 app.module.ts 文件导入部分的样子 -

/**
 * Import Angular and Ionic libraries.
 */
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

/**
 * Import third-party libraries.
 */
import { ChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(EnlightMobileApp),
    IonicStorageModule.forRoot(),
    ChartsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
  ]
})
export class AppModule {}

Answer 1

ng2-charts-x 解决了 ng2-charts 的一些未解决问题，您应该尝试一下。只需按照自述文件安装它，这与您所做的类似，但无需将 chart.js 直接导入 app.component.ts.

Answer 2

对我有用！

npm install --save ng2-charts@~2.2.5

不能将 ng2-charts 与 Ionic 3 (ionic-angular 3.9.4) 一起使用

Cannot use ng2-charts with Ionic 3 (ionic-angular 3.9.4)

ionic-framework

chart.js

ng2-charts

angular