Angular4 Highcharts TypeError using require

Question

I'm making use of Angular4 and angular2-highcharts. According to the documentation I need to include the highcharts modules with the require attribute. It worked fine for including the highcharts module, but not with the additional modules (highcharts-more, highmaps etc.). When I include more module of highcharts I get errors like:

TypeError: n is not a function
TypeError: n is not a function
    at highcharts-more.js:8
    at highcharts-more.js:11

I need to implement a heatmap, which is not working now, because it makes use of the extra modules. Any idea how to solve this?

Here is my code for app.module.ts

   // solution for angular not picking up required attribute
    declare const require: any;
    export function highchartsFactory() {
      let hc = require('highcharts');
      let hex = require('highcharts/modules/exporting');
      let hmod = require('highcharts/highcharts-more');
      hex(hc);
      hmod(hex);
      return hc;
    }

    imports: [
        ChartModule,
      ],
    providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }
   ]

Could you let us know why are you initializing the parts like that? Modules should be initialized on Highcharts instance, so like `hmod(hc); hex(hc); return hc;`. Then when you pass the Highcharts instance e.g. as shown here: https://github.com/gevgeny/angular2-highcharts#access-to-the-highcharts-static-api — Kacper Madej, Oct 06 '17 at 13:51
It's doesn't really matter if I do hmod(hc); hex(hc); return hc; or what I did. I still get the error: Error: Highcharts error #17. I used this highchartsFactory solution because highcharts works fine this way (require is otherwise not recognised for some reason), problem is that it doesn't work as soon as I implement another highcharts module like highcharts-more. So if I do this without only require('highcharts') everything works fine for normal charts. I'm trying to get the heatmap to work. — viddrawings, Oct 06 '17 at 14:10

score 1 · Accepted Answer · answered Oct 10 '17 at 11:42

I solved this problem by doing the following in app.module.ts

declare const require: any;
export function highchartsFactory() {
  let Highcharts = require('highcharts');
  let Heatmap = require('highcharts/modules/heatmap');
  Heatmap(Highcharts);
  return Highcharts;
}

score 0 · Answer 2 · answered Oct 09 '17 at 10:57

The heatmap series type is not in the highcharts-more file. The required file is heatmap - as shown in this demo:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/heatmap/

and as explained in doc here:

https://www.highcharts.com/docs/chart-and-series-types/heatmap

Angular4 Highcharts TypeError using require

2 Answers2