angular-highcharts

angular-highcharts copied to clipboard

I am trying to add a Gantt module by following instructions in the documentation.

// app.module.ts
import { AppComponent } from './app.component';
import { ChartModule, HIGHCHARTS_MODULES  } from 'angular-highcharts';
import * as gantt from 'highcharts/highcharts-gantt.src';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ChartModule,
    // ...othermodules
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [ gantt ] },
    // ...other providers
  ],
})
export class AppModule {
}

I and I'm getting this error:

main.ts:26 TypeError: chartModule is not a function
    at angular-highcharts.js:315
    at Array.forEach (<anonymous>)
    at ChartService.initModules (angular-highcharts.js:310)
    at new ChartModule (angular-highcharts.js:338)
    at _createClass (core.js:23186)
    at _createProviderInstance (core.js:23151)
    at initNgModule (core.js:23057)
    at new NgModuleRef_ (core.js:24189)
    at createNgModuleRef (core.js:24172)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:35707)

I am trying to add a Gantt module by following instructions in the documentation.

// app.module.ts
import { AppComponent } from './app.component';
import { ChartModule, HIGHCHARTS_MODULES  } from 'angular-highcharts';
import * as gantt from 'highcharts/highcharts-gantt.src';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ChartModule,
    // ...othermodules
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [ gantt ] },
    // ...other providers
  ],
})
export class AppModule {
}

I and I'm getting this error:

main.ts:26 TypeError: chartModule is not a function
    at angular-highcharts.js:315
    at Array.forEach (<anonymous>)
    at ChartService.initModules (angular-highcharts.js:310)
    at new ChartModule (angular-highcharts.js:338)
    at _createClass (core.js:23186)
    at _createProviderInstance (core.js:23151)
    at initNgModule (core.js:23057)
    at new NgModuleRef_ (core.js:24189)
    at createNgModuleRef (core.js:24172)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:35707)

Hi, I have the same problem and I was fixed with code like this.

Before import * as gantt from 'highcharts/highcharts-gantt.src';

After import gantt from 'highcharts/highcharts-gantt.src';

Maybe, you can try it.