angular-highcharts: TypeError: chartModule is not a function

@joeykruger @ubirajr The workaround (as mentioned in https://github.com/angular/angular-cli/issues/9058#issuecomment-355021360) is to force the default import for your chart module imports. So do

import * as sunburst from 'highcharts/modules/sunburst.src';

instead of

import sunburst from 'highcharts/modules/sunburst.src';

for all your chart modules.

@attilacsanyi Tried providers: [ {provide: HIGHCHARTS_MODULES, useFactory: () => [drilldown] }], Its working 😃. Appreciate your help 👍 Thanks.

Dear @superkick I just upgraded to the latest cli (1.7.1) and angular (5.2.6) and the custom HighchartsModule still working fine for me:

import { NgModule } from '@angular/core';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';

import * as Highcharts from 'highcharts';
import * as boostCanvas from 'highcharts/modules/boost-canvas';
import * as boost from 'highcharts/modules/boost.src';
import * as exporting from 'highcharts/modules/exporting.src';
import * as heatmap from 'highcharts/modules/heatmap.src.js';
import * as noDataToDisplay from 'highcharts/modules/no-data-to-display.src';
import * as offlineExporting from 'highcharts/modules/offline-exporting.src';

@NgModule({
  exports: [ChartModule],
  providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: () => [
        boostCanvas, boost, exporting, heatmap, noDataToDisplay, offlineExporting
      ]
    }
  ]
})
export class HighchartsModule {
  constructor() {
    const globalOptions: Highcharts.GlobalObject = {
      // http://api.highcharts.com/highstock/global.timezoneOffset
      timezoneOffset: new Date().getTimezoneOffset()
    };

    Highcharts.setOptions({
      global: globalOptions
    });
  }
}

I hope this helps 😉

Thanks @cebor for the update thats really a great news!

BTW, I use this code for more than a month with --prod and working well. Proof: Source from angularplaybook of Justin Schwartzenberger who is a product manager and educator at Nrwl.io.

@gubenkovalik try to press on the following button in this issue:

Fuck this shit, how to stop receiving this fucking excrements?

пн, 6 авг. 2018 г., 8:51 renukaamujuru notifications@github.com:

can i have a example of how to import highmaps and use world.js map in angular 5

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cebor/angular-highcharts/issues/112#issuecomment-410596227, or mute the thread https://github.com/notifications/unsubscribe-auth/AE3iKCAeybiqVN3gLGyNfjGVDfGkHUN-ks5uN9legaJpZM4RNMnb .

Issue is fixed with @angular/cli@6.0.0.

@manhar-developer this should work:

import * as drilldown from 'highcharts/modules/drilldown.src.js';

providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: () => [..., drilldown]
    }
  ]

Let me know your case 😉

Hmmm it seems there is issue with the module itself as Angular throws this error:

error TS7016: Could not find a declaration file for module 'highcharts/modules/drilldown.src.js'.

I came across this issue while creating a ‘solidgauge’ chart. To solve it I’ve created a separate module (even though it doesn’t need to be, it’s just cleaner) and called it in my page module :

import { NgModule } from '@angular/core';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';

import * as more from 'highcharts/highcharts-more.src';
import * as solidGauge from 'highcharts/modules/solid-gauge.src';

@NgModule({
  exports: [ChartModule],
  providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: () => [more, solidGauge]
    }
  ]
})
export class HighchartsModule { }

How to import the more module was the missing link 😃

hey @attilacsanyi,

many thanks for your help!

i can confirm this approach is working correctly for me.

@cebor - excellent news! keep up the great work 👍

@gubenkovalik This https://github.com/cebor/angular-highcharts/issues/112#issuecomment-364705934

@moepkid you don’t have to force the import for ChartModule.

@filipesilva posted temporary workaround to fix this issue: https://github.com/angular/angular-cli/issues/9058#issuecomment-355021360

I created an issue: https://github.com/angular/angular-cli/issues/9058

Hey all, --prod build should work even with ng-cli 1.6.3.

Don’t know why normal build is failing, i will let you hear if i find it out.