Workaround for using Angular2 Highcharts with AOT rollup build

27 Apr 2017

Angular2 Highcharts is an angular module written by open source community for enabling Highcharts feature in Angular2+ applications. Though the integration are easier in most cases, the straight forward way will not work as expected with different available build system.

Angular2-seed project provides ready to use Angular 4+ seed project with most of the must have tools configured and ready to roll-on. In addition, it offers many build configurations like build.dev, build.prod, build.prod.aot & build.prod.rollup.aot from which we can select suitable ones. The project is set based on SystemJS module system.

I have considered

  1. build.dev for the development purpose and 
  2. build.prod.rollup.aot configuration for the production build.

This article deals with workaround for few issues faced while integrating Angular2 Highcharts in Angular2 Seed project using above build configurations. 

Issue 1: The default setup shown in the Angular2 Highcharts will work fine with the development build. but it will fail with following error during AOT production build, as require() is not recognized by the es6/es2015 rollup plugin. So we need to handle it accordingly for dev and prod builds.

Error thrown:

 Error encountered resolving symbol values statically. Calling function 'ChartModule', function calls are not supported.

This build error can be fixed by using the es2015 supported import syntax, but that will not work with the development build configuuration. You can fix above error by using a private service from the original Library, as suggested in Angular2 Highcharts Github issue. See how HighchartsStatic service is used.

//app.module.ts

import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import Highcharts from 'highcharts';
import { Config } from './shared/config/env.config';

export function highchartsFactory() {
  return Config.ENV === 'DEV' ? require('highcharts') : Highcharts;
}

@NgModule({
  imports: [...],
  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }, {
    provide: HighchartsStatic,
    useFactory: highchartsFactory
  }],
  bootstrap: [AppComponent]

})

Note:

In HighChartsFactory(), I've used Environment variable provided by Angular Seed project to detect & serve the right object during development / AOT rollup production builds. This fix is based on Angular seed project (Angular2-seed) but similar env. based fix can be easily setup for your projects.

Issue 2: This issue happens while we import the static ChartModule.

An error will be thrown during AOT compilation, as Angular CLI expects the named export/imports. But the Angular2 Highcharts just provides export * from './dist/index' which is not accepted by the CLI.

Following is the default suggested import syntax

import { ChartModule } from 'angular2-highcharts';

The above mentioned build error can be resolved by using following exact import path

//Module where you use highchart
//home.module.ts

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

@NgModule({
  imports: [..., ChartModule],
  declarations: [HomeComponent],
  exports: [HomeComponent],
  providers: []
})

After, performing above two modifications I could build my project with both dev and prod build configurations without any issue.

Hope this helps you, or else you can contact me for any help.