Having build errors after upgrading to v 0.5.5 (from 0.4.1) ...

Please feel free to remove this if you don’t think its appropriate but I’m posting this here in case other people run into the same issue. I want to make sure I am doing the right thing, it seems like I shouldn’t be doing this but it works. Or maybe, the documentation should be updated in case other people run into the same thing.

After upgrading to 0.5.5 (from 0.4.1) I made the changes to the module file that was in the documentation. NOTE: In my case, I have the angular2-highcharts module included in a module that is NOT the app module so maybe this is why it didn’t work for me.

The changes I made to my module file was the following (as recommended in the release notes for v0.5.4):

@NgModule({
  imports: [
    CommonModule,
    ChartModule.forRoot(require('highcharts'))
  ],

When I build (note: I am using the very latest angular-cli beta 32) I get the following error:

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 TngoCommonModule in /Users/emcpadden/Tangoe/Code/analytics/tangoe-analytics/src/app/tngo-common/tngo-common.module.ts, resolving symbol TngoCommonModule in /Users/emcpadden/Tangoe/Code/analytics/tangoe-analytics/src/app/tngo-common/tngo-common.module.ts

In looking at some of the issues, I saw something that looked like it might work, although I’m not sure I get why. But when I change the module file to the following, I was able to get everything to work:

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
export function highchartsFactory() {
  return require('highcharts');
}

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

Is this something I should be doing? It does work but I just want to make sure there isn’t some other more accepted solution.

Thanks!

P.S. THANK YOU @gevgeny for creating this library! I do really appreciate this library THANK YOU for all the work you did on this.

[Gsmalhotra1]

Check my App module code , this may help you

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 { }

[nategthomas]

You can use highstock with the method shown by Gsmalhotra1 by importing it like this:

import * as stock from “highcharts/modules/stock”;