ngx bar chart not working

Describe the bug Ngx Vertical bar chart is not working in serve PROD

To Reproduce Steps to reproduce the behavior:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

Expected behavior Bar Chart should load with data

Screenshots If applicable, add screenshots to help explain your problem.

Demo Provide an online demo (stackblitz, codesandbox, or similar) where the issue can be reproduced

ngx-charts version 10.1.0, even present for 12.0.1

Additional context The issue only exists when we do ng serve --prod with optimization and buildOptimizer as true(we cannot turn these off for PROD), otherwise it works fine. We have our application on angular 7 with below configuration.

Angular JSON: "configurations": { "production": { "optimization": true, "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, } }

Package JSON: "@angular/animations": "7.2.7", "@angular/common": "7.2.7", "@angular/compiler": "7.2.7", "@angular/core": "7.2.7", "@angular/fire": "5.0.2", "@angular/flex-layout": "7.0.0-beta.23", "@angular/cdk": "7.3.1", "@angular/forms": "7.2.7", "@angular/http": "7.2.7", "@angular/platform-browser": "7.2.7", "@angular/platform-browser-dynamic": "7.2.7", "@angular/router": "7.2.7", "@swimlane/ngx-charts": "10.1.0",

"devDependencies": { "@angular-devkit/build-angular": "0.13.9", "@angular/cli": "^7.3.3", "@angular/compiler-cli": "7.2.7", "@angular/language-service": "7.2.7", "@types/jasmine": "2.8.3", "@types/jasminewd2": "2.0.2", "@types/node": "6.0.60", "codelyzer": "4.0.1", "jasmine-core": "2.99.1", "jasmine-spec-reporter": "4.2.1", "karma": "2.0.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "1.2.1", "karma-jasmine": "1.1.1", "karma-jasmine-html-reporter": "0.2.2", "protractor": "5.1.2", "ts-node": "4.1.0", "tslint": "5.9.1", "typescript": "3.2.4" }

ERROR IN CONSOLE: 2019-11-19T06:22:36.870Z [ERROR] ERROR: TypeError: (void 0) is not a function at Sf (defaultLocale.js.pre-build-optimizer.js:4) at Function.n.tickFormat (linear.js.pre-build-optimizer.js:15) at n.update (y-axis-ticks.component.js.pre-build-optimizer.js:60) at n.ngOnChanges (y-axis-ticks.component.js.pre-build-optimizer.js:34) at core.js.pre-build-optimizer.js:22117 at core.js.pre-build-optimizer.js:23378 at Ry (core.js.pre-build-optimizer.js:23327) at rv (core.js.pre-build-optimizer.js:23865) at Object.updateDirectives (y-axis.component.d.ts.YAxisComponent.html:3) at Object.updateDirectives (core.js.pre-build-optimizer.js:23653) at ky (core.js.pre-build-optimizer.js:23306) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at Object.ky [as checkAndUpdateView] (core.js.pre-build-optimizer.js:23312) at e.detectChanges (core.js.pre-build-optimizer.js:21687) at core.js.pre-build-optimizer.js:18118 at Array.forEach (<anonymous>) at e.tick (core.js.pre-build-optimizer.js:18118) at core.js.pre-build-optimizer.js:18009 at t.invoke (zone.js.pre-build-optimizer.js:391) at Object.onInvoke (core.js.pre-build-optimizer.js:17298) at t.invoke (zone.js.pre-build-optimizer.js:390) at n.run (zone.js.pre-build-optimizer.js:150) at e.run (core.js.pre-build-optimizer.js:17212) at Object.next (core.js.pre-build-optimizer.js:18009) at t.o [as _next] (core.js.pre-build-optimizer.js:13514) at t.__tryOrUnsub (Subscriber.js.pre-build-optimizer.js:194) at t.next (Subscriber.js.pre-build-optimizer.js:132) at t._next (Subscriber.js.pre-build-optimizer.js:76) at t.next (Subscriber.js.pre-build-optimizer.js:53) at t.next (Subject.js.pre-build-optimizer.js:47)

and 2019-11-19T06:22:36.910Z [ERROR] ERROR: TypeError: e.transform is not a function at Object.updateRenderer (y-axis-ticks.component.d.ts.YAxisTicksComponent.html:3) at Object.updateRenderer (core.js.pre-build-optimizer.js:23655) at ky (core.js.pre-build-optimizer.js:23311) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at Object.ky [as checkAndUpdateView] (core.js.pre-build-optimizer.js:23312) at e.detectChanges (core.js.pre-build-optimizer.js:21687) at core.js.pre-build-optimizer.js:18118 at Array.forEach (<anonymous>) at e.tick (core.js.pre-build-optimizer.js:18118) at core.js.pre-build-optimizer.js:18009 at t.invoke (zone.js.pre-build-optimizer.js:391) at Object.onInvoke (core.js.pre-build-optimizer.js:17298) at t.invoke (zone.js.pre-build-optimizer.js:390) at n.run (zone.js.pre-build-optimizer.js:150) at e.run (core.js.pre-build-optimizer.js:17212) at Object.next (core.js.pre-build-optimizer.js:18009) at t.o [as _next] (core.js.pre-build-optimizer.js:13514) at t.__tryOrUnsub (Subscriber.js.pre-build-optimizer.js:194) at t.next (Subscriber.js.pre-build-optimizer.js:132) at t._next (Subscriber.js.pre-build-optimizer.js:76) at t.next (Subscriber.js.pre-build-optimizer.js:53) at t.next (Subject.js.pre-build-optimizer.js:47) at t.emit (core.js.pre-build-optimizer.js:13498) at Ah (core.js.pre-build-optimizer.js:17267)

[kkakroo]

We didn’t had an option to turn the build optimizer off as our app was in PROD. The issue was because the d3 and it’s dependencies have recently updated their version. When we used the old package-lock.json, it was running fine. So you can either:

1. update old package-lock.json’s d3 dependencies of your newly generated lock file.
2. add the below packages in your solution. "d3-array": "1.2.4", "d3-brush": "1.1.3", "d3-color": "1.4.0", "d3-force": "1.2.1", "d3-format": "1.4.1", "d3-hierarchy": "1.1.8", "d3-interpolate": "1.3.2", "d3-scale": "1.0.7", "d3-selection": "1.4.0", "d3-shape": "1.3.5", "d3-time-format": "2.2.1"

This will override the ones which have recently got updated , causing the issues.

Will it be fine if we use specific versions instead of automatically updated ones due to ^ here cz that fixed it or me . I think that should fix the issue.

Shall i raise the PR for that if it’s okay?

[TmanTman]

I’m sure it’s related to issues with the Angular CLI. The production build optimiser removes important code from the libraries. The suggested fix is to change the angular-cli build process - not sure how that can be done in a maintainable way.

A related issue on ngx-charts due to the issue: https://github.com/swimlane/ngx-charts/issues/1305

More information on the angular/cli issue: https://github.com/angular/angular-cli/issues/11439

Looking forward to suggestions to a fix. Have thought about including minified libraries in the assets folder and loading it in index.html. Just not sure how that can be done effectively.

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