chartist issue with Ionic --prod mode

[akhatri]

the plugin is really great but unfortunately, there is a slight issue when I compile my Ionic application in production. I had to narrow it down to chartist as the entire tab page was blank due to some minification error. I'm on the latest version of Ionic and ng-chartist. My console shows this error

Uncaught TypeError: i is not a function
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)
    at e.exports (vendor.js:1)
    at vendor.js:1
    at n (vendor.js:1)
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)
    at Object.631 (main.js:1)
    at e (vendor.js:1)
    at window.webpackJsonp (vendor.js:1)

I import ng chartist in the component module (which is lazy loaded). i.e. portfolio.module.ts

import { ChartistModule } from 'ng-chartist'; and

@NgModule({
  declarations: [
    PortfolioPage,
  ],
  imports: [
    IonicPageModule.forChild(PortfolioPage),
    ChartistModule
  ],
})

imports in portfolio.ts

import * as Chartist from 'chartist';
import { ChartType, ChartEvent } from 'ng-chartist';

export interface Chart {
  type: ChartType;
  data: Chartist.IChartistData;
  options?: any;
  responsiveOptions?: any;
  events?: ChartEvent;
}

Inside my class, I create the chart object with options

  public chart = {
    data: {
      series: [
        [12, 9, 7, 8, 5]
      ]
    },
    type: 'Line',
    options: {
      height: '200px',
      width: '400px,,
      low: 0,
      lineSmooth: Chartist.Interpolation.simple(),
      showPoint: false,
      showLine: false,
      showArea: true,
      fullWidth: true,
      axisX: {
        showLabel: false,
        showGrid: false,
        offset: 0
      },
      axisY: {
        showLabel: false,
        showGrid: false,
        offset: -10
      }
    }
  }

And I finally reference the chart in my html

      <x-chartist class="portfolio-chart" [data]="chart.data" [type]="chart.type" [options]="chart.options"
        [responsiveOptions]="chart.responsiveOptions" [events]="chart.events">
      </x-chartist>

I have tried to import the chartist module in app.module.ts as well but I get template parse errors

Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'x-chartist'.

has anyone come across this issue before? Any help appreciated. I'm on the latest version of Ionic 3.7.1, including its packages and ng-chartist as well

[willsoto]

Hey there, this has been an issue that keeps cropping up.

It seems people had luck with this solution.

Let me know if that works for you.

[akhatri]

Hey @willsoto I tried the solution it didn't work but I have found a temporary workaround.

As per the earlier solution...

I've changed the imports in my module files as
import { ChartistModule } from 'ng-chartist/src/chartist.component';

It throws an error as it can't find the module, which is wierd as the .ts file is present in the src folder. Basically it fails to compile the .ts file to js as it's looking for a compiled *.js version

ERROR Error: Uncaught (in promise): Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\GitHub\ionic-project\node_modules\ng-chartist\src\chartist.component.js'
Error: Module build failed:

In order to fix it, I had to grab the typescript file and place it in my local project. Importing that file in my original module files work. I'm glad that the project works in production mode now although it would be great once there is a potential permanent fix. Hopefully, this solves the issue others might be facing with Ionic projects.

[willsoto]

I am open to PRs of course, but glad to see you solved the immediate problem.