d3 bar chart using ionic 4 failed to load on device on — prod mode

i am building bar charts using D3, it runs fine when i run with ionic cordova run/build android but it gives error when i run with --prod mode i.e ionic cordova run/build android --prod. The app opens fine but the bar chart do not draw. The x-axis draws fine but it is unable to draw y- axis. can someone please help.

 **here is mycode** //  

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

import * as d3 from 'd3-selection';
import * as d3Scale from 'd3-scale';
import * as d3Array from 'd3-array';
import * as d3Axis from 'd3-axis';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  barData = [
    { season: 'S1', viewers: 250000 },
    { season: 'S2', viewers: 380000 },
    { season: 'S3', viewers: 500000 },
    { season: 'S4', viewers: 690000 },
    { season: 'S5', viewers: 690000 },
    { season: 'S6', viewers: 750000 },
    { season: 'S7', viewers: 1000000 },
    { season: 'S8', viewers: 1700000 }
  ];
  title = 'originals';
  subtitle = 'Viewers per season for';
  width: number;
  height: number;
  margin = { top: 20, right: 20, bottom: 30, left: 40 };
  x: any;
  y: any;
  svg: any;
  g: any;

  constructor(private _platform: Platform) {
    this.width = 900 - this.margin.left - this.margin.right;
    this.height = 500 - this.margin.top - this.margin.bottom;
  }

  ionViewDidEnter() {
    this.init();
    this.initAxes();
    this.drawAxes();
    this.drawChart();
  }

  init() {
    this.svg = d3.select('#barChart')
      .append('svg')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('viewBox', '0 0 900 500');
    this.g = this.svg.append('g')
      .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
  }

  initAxes() {
    this.x = d3Scale.scaleBand().rangeRound([0, this.width]).padding(0.1);
    this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
    this.x.domain(this.barData.map((d) => d.season));
    this.y.domain([0, d3Array.max(this.barData, (d) => d.viewers)]);
  }

  drawAxes() {
    this.g.append('g')
      .attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(d3Axis.axisBottom(this.x))
      .attr('font-size', '30');
    this.g.append('g')
      .attr('class', 'axis axis--y')
      .call(d3Axis.axisLeft(this.y))
      .append('text')
      .attr('class', 'axis-title')
      .attr('transform', 'rotate(-90)')
      .attr('y', 6)
      .attr('dy', '0.71em')
      .attr('text-anchor', 'end')
      .attr('fill', 'rgb(34, 167, 240)')
      .attr('font-size', '50')
      .text('viewers');
  }

  drawChart() {
    this.g.selectAll('.bar')
      .data(this.barData)
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .attr('fill', 'rgb(34, 167, 240)')
      .attr('x', (d) => this.x(d.season))
      .attr('y', (d) => this.y(d.viewers))
      .attr('width', this.x.bandwidth())
      .attr('height', (d) => this.height - this.y(d.viewers));
  }
}

**pacjage.json**
{
  "name": "example",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/android-permissions": "^5.17.1",
    "@ionic-native/camera": "^5.17.1",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/document-viewer": "^5.17.0",
    "@ionic-native/file": "^5.17.0",
    "@ionic-native/file-opener": "^5.17.0",
    "@ionic-native/file-transfer": "^5.17.0",
    "@ionic-native/local-notifications": "^5.17.1",
    "@ionic-native/network": "^5.17.0",
    "@ionic-native/screen-orientation": "^5.17.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "cordova-android": "8.1.0",
    "cordova-browser": "6.0.0",
    "cordova-plugin-android-permissions": "^1.0.2",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-document-viewer": "^0.9.13",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^2.2.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-sqlite-storage": "^3.4.0",
    "core-js": "^2.5.4",
    "d3": "^5.14.2",
    "es6-promise-plugin": "^4.2.2",
    "jquery": "^3.4.1",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-network-information": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-document-viewer": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-file": {},
      "cordova-plugin-file-opener2": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      }
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

This is the error which i am getting

i am stuck in this for a while. Any help would be really helpful. Thanks in advance

Hello,
hmm maybe you try to call a value like a function or try to call function, but it is a value… Maybe it helps if you check your code for unusuale charakters like ,; () {} that are placed in false manner.

Best regrds, anna-liebt

hi, Finally it started working after i added

this.g.append(‘g’)
.call(d3Axis.axisLeft(this.y).tickFormat ((d: any) => {
return d;
})
)

It seemed tickformat is necessary while running in production mode. anyway still thanks.