Production build issue with ChartModule

Ionic Framework ionic-v3
1

I try to build my application with production flag i have an error like this.

Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'require'. Consider exporting the symbol (position 38:13 in the origi
nal .ts file), resolving symbol AppModule in C:/Users/fs/Desktop/venky/new futures/futures-services latest/src/app/app.module.ts

this error because of i have used used require for highcharts like this and i am not allow to use ChartModule directly
ChartModule.forRoot(require('highcharts'),require ('../../node_modules/highcharts/highcharts-more.js'))

i have followed this post and i did not get any errors but my charts are not displaying. give me help to sort this.

2

Perusing the issues for highcharts, it looks like the author is aware of the problem, hasn’t decided how they would like to fix it, and isn’t very keen on any of the multiple workarounds. There are also several reports of stuff just not working with Angular4 at all. I think if I were you, I would look around for another charting library.

3

Thank you for your response if we can not fix this problem i have to change my charting library and i would be grateful if you suggest some other charting libraries which we have no issues like this.

4

angular2-chartjs looks worth taking a look at. I’ve used the underlying library in Angular2 projects before, and it looks like that shim is Angular4-compatible.

5

There were a few blog posts about using some charts libraries with Ionic in the last few days and weeks. Google should help to find them.

6

I have successfully integrate highcharts in production build here is what i did.thank you for your response.

import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import { ChartModule } from 'angular2-highcharts';
declare var require: any;

export function highchartsFactory() {
    var hc = require('highcharts');
    var hcm = require('highcharts/highcharts-more');
    hcm(hc);
    return hc;
}

providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule
1 Like