Angular2-highcharts not working

[phani257]

I have created a new project using angular-cli
I followed all the steps that are suggested at the page
https://www.npmjs.com/package/angular2-highcharts

npm install angular2-highcharts --save
import { ChartModule } from 'angular2-highcharts';
ChartModule.forRoot(require('highcharts')

When I run the app, it says cannot find name 'require'
Do I need to follow any other steps.

[cebor]

Install types for node should fix this warning.

npm install -D @types/node

[DuncanFaulkner]

Hi,
I had a similar issue. there is a detailed issue in this repo I can't remember the number of the top of my head.

I think what I did to resolve it was to import HighchartsStatic from HighchartsService and then add in the app.module

export function highchartsFactory() {
return require('highcharts');
}

[phani257]

@cebor npm install -D @types/node didn't help me to fix the issue

[phani257]

@DuncanFaulkner Can you please elaborate. I didn't get it exactly.

[matthiaskomarek]

This is the other issue for the "require problem" #176

You can also just add:

declare var require: any;

To your module where you want to require highcharts

[phani257]

@matthiaskomarek I added declare var require: any; in my app.module.ts. Once I add that, I am getting the below error.
Please let me know if I need to do any changes.

ERROR in Error encountered resolving symbol values statically. Reference to a lo
cal (non-exported) symbol 'require'. Consider exporting the symbol (position 8:1
3 in the original .ts file), resolving symbol AppModule in c:/Projects/Highchart
s/Highcharts/src/app/app.module.ts
webpack: Failed to compile.

[matthiaskomarek]

This is how i do it inside my app.module.ts

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

declare var require: any;
export function highchartsFactory() {
  return require('highcharts');
}

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

[luiscvalmeida]

Happening the same for me, angular2 v4, the @matthiaskomarek answer allowed me to compile the code the crashes on browser.

[matthiaskomarek]

@luiscvalmeida can you be more specific about "the code crashes on browser". Because with chrome 57 it works

[danielyankowski]

@matthiaskomarek thanks for the solution. It allows to compile without error however I get the ' Chart is unknown chart type.' error in the console and highcharts do not load...

[matthiaskomarek]

@danielyankowski can you please provide some code?

[Den-dp]

Also instead of declaring a require keyword you can try this:

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

-declare var require: any;
-export function highchartsFactory() {
-  return require('highcharts');
-}

@NgModule({
  imports: [
      ChartModule
  ],
  declarations: [ AppComponent ],
  exports: [],
  providers: [
    {
      provide: HighchartsStatic,
-     useFactory: highchartsFactory
+     useValue: highcharts
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule

/cc @matthiaskomarek

[danielyankowski]

@matthiaskomarek Thanks for help, everything works now, my mistake was not importing necessary highcharts dependencies :)
@Den-dp Thanks, this solution looks like the fastest way to deal with the import :) however I read in some other thread, that importing all higcharts dependencies might not be the most efficient way.
My code now is slightly extended @matthiaskomarek 's solution, I modified highchartsFactory function so now it includes dependencies necessary for my project:

export function highchartsFactory() {
    var hc = require('highcharts');
    var hcm = require('highcharts/highcharts-more');
    var sg = require('highcharts/modules/solid-gauge');
    hcm(hc);
    sg(hc);
    return hc;
}

[budcribar]

Tried Den-dp's suggestion
import * as highcharts from 'highcharts';
providers: [
{
provide: HighchartsStatic,
useValue: highcharts
},

but received a compile error on this line:
useValue: highcharts

cannot find name highcharts

so I changed to

import * as Highcharts from 'highcharts';
providers: [
{
provide: HighchartsStatic,
useValue: Highcharts
},

which compiles fine but at run time I get:

bundle.min.js:1 ERROR Error: Base Highcharts module should be set via ChartModule.init
at Object.Yg [as initChart] (bundle.min.js:5) [angular]
at t.init (bundle.min.js:37) [angular]
at t.ngAfterViewInit (bundle.min.js:37) [angular]
at Pn (bundle.min.js:1) [angular]
at Sn (bundle.min.js:1) [angular]

I am using angular 4.03

any ideas?
thanks,
bud

[wittml]

The combination of @matthiaskomarek's code + what @danielyankowski added did the trick for me. Anybody know if this will be the final answer or will another solution be forthcoming?