CODEWITHSUNDEEP
angularionic-frameworkchart.jsng2-charts
Patiss
Patiss

Reputation: 187

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

So I'm trying to setup ng2-charts for my project, but as soon as I import the module in app.module.ts import section, it gives me the following error message:

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:

And if we check the line in ng2-charts.js file -

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

I have installed chart.js and imported it in app.component.ts file as following -

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

And this is how the app.module.ts file import section looks like -

/**
 * 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 {}

Upvotes: 1

Views: 3923

Answers (2)

Adriano Neves
Adriano Neves

Reputation: 11

It works for me!

npm install --save ng2-charts@~2.2.5

Upvotes: 1

Alex Steinberg
Alex Steinberg

Reputation: 1466

ng2-charts-x addresses some of the unresolved issues with ng2-charts, you should try it. Just install it as per the readme, which are similar to what you have done but without importing chart.js directly into app.component.ts.

Upvotes: 3

Related Questions