ngxChart not working in Production Enviroment

[MarthaBarahona]

Describe the bug In my Angular project I am using ngx charts, but when I try to see the results in my production enviroment it is not displaying any chart, but when I run locally my project there is no problem.

When you are running the project locally you can see the follow charts:

But when you try it to see it in production enviroment:

and in console it shows the follow message:

ngx-charts version "@swimlane/ngx-charts": "^12.0.1", "d3": "^5.12.0", "chart.js": "^2.8.0",

With Angular 8.

[Tamrei]

+1 same issue

[mokhtar93]

same issue +2 happens with line charts

[TmanTman]

I'm sure it's related to this issue, i.e. the production build optimizer actually removing code from the libraries: https://github.com/angular/angular-cli/issues/11439

Not sure what a reasonable fix is. I'm don't think it's a maintainable fix to fork the angular cli to change the hard-coded optimisation options as suggested.

Maybe it's possible to include all imports for this library in the assets folder, so that Angular does not break the code while optimising for the production build?

From what I can tell from this ticket and the related commit, this will be fixed in Angular 9. https://github.com/angular/angular-cli/pull/14187 https://github.com/angular/angular-cli/commit/9a9939fc4eb92f50241bc1e46b6623505a587bc5

[nikopol-fw]

Few month ago I have no any problem with ngxChart, but today after compiling my project without update ngxChart I get the same error. I found that dependencies of the ngxChart for d3 packages in package-lock are with ^.

I installed by myself old versions of d3 packages in my project package.json. In my case it is temporary solution of the problem until Angular 9.

[redmission84]

@nikopol-fw Does the package-lock.json need to be updated as well? I'm wondering what the "winning" combinations/versions of d3 libraries I need are to match with the specific versions of ngx-charts? I believe my package.json had me using ^6.0.0 of ngx-charts, but think my package-lock.json was 12 too? Not sure how they relate. Glad I found this post!

[redmission84]

@MarthaBarahona Did you find a working solution for you? I'm experiencing the same issue where it works fine locally and the same error after deploying to my live environment which, of course, does an npm install and used the ^ before the version numbers in ngx-charts and d3.

[TmanTman]

As a temporary fix, I found that making my Angular Dependencies to the following versions worked (fixing implying that I removed the '^' and '~' from the version numbers):

"@angular/animations": "8.2.14", "@angular/cdk": "8.2.3", "@angular/common": "8.2.14", "@angular/compiler": "8.2.14", "@angular/core": "8.2.14", "@angular/forms": "8.2.14", "@angular/material": "8.2.3", "@angular/platform-browser": "8.2.14", "@angular/platform-browser-dynamic": "8.2.14", "@angular/router": "8.2.14",

I use D3 outside of ngx-charts as well, and for that I fix D3 to 4.13.0

My Swimlane dependency is currently simply set to "@swimlane/ngx-charts": "^12.0.1".

[Hypercubed]

I believe the next version with ng9 support will fix this issue.

[thesharlinator]

Anyone have any success fixing this with dependencies for those of us still lagging behind with Angular 7? while waiting for an upgrade to 9... I have the same issue with 7 and struggling to find the right combination... EDIT: Can confirm using the fixed d3 dependencies mentioned above works with 7, I had mis-copied a number. 'til the upgrade! Thanks so much @nikopol-fw