Ng2-charts: Error using ng2-charts with angular webpack

[agustincelentano]

This is my configuration:

In the .ts file and imported as import 'chart.js/src/chart.js'; where I need to use it. I added it in my app.module.ts as well.

But when running the App I have this error:

ERROR Error: Uncaught (in promise): TypeError: Chart.controllers[meta.type] is not a constructor
TypeError: Chart.controllers[meta.type] is not a constructor
at Chart.Controller.eval (eval at (http://localhost:3000/js/app/bundle.js:2499:1), :272:24)
at Object.helpers.each (eval at (http://localhost:3000/js/app/bundle.js:2520:1), :23:15)

Is there any particular configuration to do using webpack? I saw many issues which says to add it as a script tag in the index.html file but it did not work for me. I think this problems is NOT related to that.

Thanks

[m--c]

I'm using it with webpack.
First of all, I have "all" charts.js folder available not just chart.js. Then, in my main boot file (html launcher) I reference it like this:
<script src="/lib/chart.js/dist/Chart.bundle.min.js"></script>
in my @NgModule i reference this:

@NgModule({
    imports: [ ChartsModule],
....
    exports: [ ChartsModule],

finally, my package.json has 2 references:

"chart.js": "2.4.0", and "ng2-charts": "1.5.0",

[agustincelentano]

I did not understand this part:
When you do npm install, it is installed inside the node_module folder. right?
Why are you exporting the CharsModule as well?

[agustincelentano]

Using import 'chart.js' and exporting it. It works

[ahmadalibaloch]

Look here my comment https://github.com/valor-software/ng2-charts/issues/458

[paviad]

Closing for inactivity - if issue persists, feel free to comment with a working example (codepen/plunkr/...) which demonstrates the issue.

[rexmarkh]

Cannot use ng2-charts in Angular5 and I am facing the following issues...

WARNING in ./node_modules/ng2-charts/fesm5/ng2-charts.js 230:54-70
"export 'defineInjectable' was not found in '@angular/core'

Uncaught TypeError: Object(...) is not a function
at ng2-charts.js:230
at Module../node_modules/ng2-charts/fesm5/ng2-charts.js (ng2-charts.js:232)

please help me if there is any workaround...

[paviad]

Which ng2-charts version are you using and which Angular CLI version? I will try to reproduce here.

[rexmarkh]

"@angular/cli": "^6.2.4",
"@angular/core": "^5.0.0",
"ng2-charts":2.0.3

[opapirnyk]

same issue
"ng2-charts": "^2.2.2",
"@angular/cli": "~1.7.4",
"@angular/core": "^5.2.0"

[dluk]

I also get Object(...) is not a function with
"ng2-charts": "~2.2.0",
"chart.js": "~2.8.0",
"@angular/cli": "~1.7.0",
"@angular/core": "^5.2.0",

"scripts": [
"../node_modules/chart.js/dist/Chart.bundle.min.js",

[katmandu25]

Me too:

"ng2-charts": "~2.2.2",
"chart.js": "~2.8.0",
@angular/cli: 1.7.4,
Angular: 5.2.11

Uncaught TypeError: Object(...) is not a function
at eval (webpack-internal:///./node_modules/ng2-charts/fesm5/ng2-charts.js:245)
at eval (webpack-internal:///./node_modules/ng2-charts/fesm5/ng2-charts.js:247)
at Object../node_modules/ng2-charts/fesm5/ng2-charts.js (vendor.bundle.js:1032)
at __webpack_require__ (inline.bundle.js:55)

[dluk]

Apparently since v2 ng2-charts depends on a feature which is only supported from Angular v6 and is not backwards compatible. Ref: https://github.com/ng-packagr/ng-packagr/issues/1088#issuecomment-422644326
So there are two options: update Angular to v6+ or use v1 of ng2-charts

[koo9]

getting this issue with angular 7. it wasn't a problem yesterday but the error shows up today in the CI build in docker.

[DonBeck69]

I had a similar issue, "TypeError: Object(...) is not a function ng2-charts". Angular 7.2.9 and webpack 4.30.0
I rolled ng2-charts back from version 2.2.4 to 2.2.3 and the application works again.

[paviad]

Can you check if 2.2.5 works again? I've rolled back the changes from 2.2.3
to 2.2.4 into 2.2.5.

On Fri, May 31, 2019 at 7:59 PM Donovan [e-mail] wrote:

I had a similar issue, "TypeError: Object(...) is not a function
ng2-charts". Angular 7.2.9 and webpack 4.30.0
I rolled ng2-charts back from version 2.2.4 to 2.2.3 and the application
works again.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-charts/issues/750?email_source=notifications&email_token=AAJNV2BTZVZYEWP64ZQSXELPYFKN5A5CNFSM4DIMNB2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWVZPVA#issuecomment-497784788,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAJNV2AWENRROZY6JDWG2I3PYFKN5ANCNFSM4DIMNB2A
.

[adriannowak]

@paviad i have had the same problem. It works with 2.2.5

[Dyu13]

Same problem with v2.2.4. Confirm v2.2.5 is working on Angular > 7.

[Smoenybfan]

Same problem with v2.3.0, angular core and common 7.2.15 and chart.js 2.8.0. Rolled back to v2.2.5 and it's working.

[pichlou]

I have the same problem with :

ng2-charts: 2.3.0,
chart.js: 2.8.0,
angular/cli: 6.0.8,
Angular: 6.0.0

Can anyone help me?

[paviad]

If Angular < 8.0.0 please use ng2-charts version ~2.2.0

On Sun, Jun 16, 2019 at 1:03 PM Farzaneh [e-mail] wrote:

I have the same problem with :

ng2-charts: 2.3.0,
chart.js: 2.8.0,
angular/cli: 6.0.8,
Angular: 6.0.0

Can anyone help me?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-charts/issues/750?email_source=notifications&email_token=AAJNV2FW7AXLMKGS4TBZAGLP2YFY7A5CNFSM4DIMNB2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXZJTNQ#issuecomment-502438326,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAJNV2G5QJHQEMJIK56ZZ7LP2YFY7ANCNFSM4DIMNB2A
.

[bladekp]

My setup which didn't work:

{
    "@angular/core": "^6.1.10",
    "chart.js": "^2.8.0"
    "ng2-charts": "~2.3.0"
}

I downgrade ng2-charts to version ~2.0.0 as @paviad mentoined above, and now it seems to work, my working setup:

{
    "@angular/core": "^6.1.10",
    "chart.js": "^2.8.0"
    "ng2-charts": "~2.0.0"
}

If Angular < 8.0.0 please use ng2-charts version ~2.2.0
…
On Sun, Jun 16, 2019 at 1:03 PM Farzaneh @.*> wrote: I have the same problem with : ng2-charts: 2.3.0, chart.js: 2.8.0, angular/cli: 6.0.8, Angular: 6.0.0 Can anyone help me? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#750?email_source=notifications&email_token=AAJNV2FW7AXLMKGS4TBZAGLP2YFY7A5CNFSM4DIMNB2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXZJTNQ#issuecomment-502438326>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAJNV2G5QJHQEMJIK56ZZ7LP2YFY7ANCNFSM4DIMNB2A .

[gurkanindibay]

@paviad i have had the same problem. It works with 2.2.5

It also worked for me
Angular version: 7.1.2

[maksof-kashif]

For Angular 7 or greater version use
npm install [email protected] --save
npm install chart.js --save

[syedaliuzair]

maksof-kashif Thank you so much.

[kevinmisigaro]

For Angular 7 or greater version use
npm install [email protected] --save
npm install chart.js --save

Thanks helped me too

[MeenalYengul]

Hi everyone,
I am using angular 6
with chart.js : 2.9.3
ng2-charts: 2.2.5
it was working fine with me and I gave pr. but in pr travis build is failing with
TypeError: Object(...) is not a function
what I should do? please help