How to import latest angular2-highcharts using AOT compiler

[mannb1]

Using angular2-highcharts with webpack and AOT compiler. The app module does not like the ChartModule.forRoot(require('highcharts')). I get the following error when I build:

ERROR in Error encountered resolving symbol values statically. Calling function 'ChartModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in ... /app/app.module.ts, resolving symbol AppModule in ... /app/app.module.ts

It worked fine before upgrading to "angular2-highcharts": "0.5.5", "@types/highcharts": "4.2.47",

Is there a workaround or how should I configure this?

I have tried using a function to return highcharts like this:

export function highchartsFactory() {
return highcharts;
}

ChartModule.forRoot(highchartsFactory()),

but I get the same error.

[xouqoa]

You can view a temporary work around here: #160 #156

Looks like a more permanent solution is being investigated by the author.

[gevgeny]

Yes, it is known issue

[ajitpatil]

May be some of the steps suggested here could help solve this issue -
https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.c04a7rngi

[jvendryes]

Any updates on this issue?

[mannb1]

I used the workaround provided above (#160) to move on for now:

[jvendryes]

@mannb1 When you did the workaround, did you run into:
Cannot find name 'require'.)? Might have missed something from the #160 solution...

Solution
npm install highcharts --save ... doh... heh

[mannb1]

I don't recall having any issues of that nature. Just make sure you import your statics and your export function defined

[jvendryes]

Yeah I keep getting that same error, it's almost like a race condition...

[mwraitt]

Just a note on the #160 workaround. It seems like this fix has a huge performance degradation associated with it.

[Gsmalhotra1]

Used following code in my app module and its running fine

import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material';
import 'hammerjs';
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

import { AppRouting } from './app.routing';
import { AppComponent } from './app.component';

declare var require: any;


export function highchartsFactory() {
      const hc = require('highcharts');
      const dd = require('highcharts/modules/drilldown');
      dd(hc);

      return hc;
}

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

[alexus85]

@Gsmalhotra1

did you try running rollup afterwards?

I'm getting 'Uncaught (in promise): ReferenceError: require is not defined' error

[hsHemant]

I am getting the same error

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'chart'

[gamebenchjake]

Any update on whether this will be fixed without requiring a workaround?

[caioc]

Any updates on this issue?

[dani0805]

having the same issue

[eddyoc]

bump

[egervari]

Also curious about a solution that does not require a workaround

[atulrathoreg]

Please use following setting in app.module.ts

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

declare var require: any;

export function highchartsFactory() {
const hc = require('highcharts');
const dd = require('highcharts/modules/drilldown');
dd(hc);
return hc;
}
@NgModule({
declarations: [

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

I hope issue will be resolved at both end deceleration time and options using time.
I am using type following in package.json
"rxjs": "^5.0.1",

"@angular/compiler-cli": "^2.3.1",
"typescript": "2.4.0" 

[catchshyam]

I used a different approach to come around the issue.

1. Load highcharts via .angular-cli.json through scripts field,

scripts: [
......                
{
                    "input": "../node_modules/highcharts/highcharts.js",
                    "output": "highcharts.js"
 },
......
]

2. Declare highcharts in typings.d.ts (or any other definitions file)

declare var Highcharts: any;

3. Use the following configuration for HighchartsStatic in your module declaration

    providers: [
        {provide: HighchartsStatic, useValue: Highcharts}
    ]

That's it. Now your code should compile on aot mode.

Hope this helps.

[Jrubzjeknf]

We use the regular approach, and it works with aot. Just import and apply the modules.

// For: regular highcharts.
import * as highcharts from 'highcharts/highcharts';
import * as highchartsMore from 'highcharts/highcharts-more';
import * as bullet from 'highcharts/modules/bullet';

// Or for: styled mode. Remember to import the provided css file from the highcharts package.
import * as highcharts from 'highcharts/js/highcharts';
import * as highchartsMore from 'highcharts/js/highcharts-more';
import * as bullet from 'highcharts/js/modules/bullet';

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

export function highchartsFactory() {
  // Default options.
  highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  // Initialize addons.
  highchartsMore(highcharts);
  bullet(highcharts);

  return highcharts;
}

Works like a charm.

[emmanueldaher]

Thanks @Jrubzjeknf, it worked perfectly.