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.

Angular 2 - AOT - Calling function 'ChartModule', function calls not supported

This is what i did to get production build successfully

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
U rock
  • 717
  • 2
  • 13
  • 32
  • Read [how to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). After you get rid off errors, does Highcharts load successfully? Do you see a chart with no data or it does not load at all? Paste component code/chart config or try to recreate a live example, e.g. on plunkr. – morganfree Jun 09 '17 at 14:04
  • I have not seen any data it shows blank white screen at charts place. it is not about logic errors because it works with out prod flag, issue with ChartModule function not supported in production build and i tested another new application thats also same error. – U rock Jun 09 '17 at 15:01
  • @Urock This seems to be a problem with the angular2-highcharts component. Maybe you could report this as a bug to the component creator? – Kacper Madej Jun 12 '17 at 12:08

1 Answers1

1

My solution for the same problem was the following:

  • Include the highcharts scripts that you need in index.html (before your systemjs.config script or when in AOT before build.js). For example:

    <script src="../node_modules/highcharts/highcharts.js"></script>
    <script src="../node_modules/highcharts/highcharts-more.js"></script>
    <script src="../node_modules/highcharts/modules/solid-gauge.js"</script>

  • This will create an object called Highcharts on the browser's window object and from there you can use it in your Angular module:

    import { ChartModule } from "angular2-highcharts/dist/index";

import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

    export function highchartsFactory() {
        return (<any>window).Highcharts;
    }

@NgModule({
    imports: [BrowserModule,
        HttpModule,
       ChartModule],
    declarations: [AppComponent],
    providers: [
        {
            provide: HighchartsStatic,
            useFactory: highchartsFactory
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Rollup can't correctly handle non-ordinary imports like import 'highcharts-more.js'. It can handle only import { module} from 'Module';

cp3o
  • 26
  • 4