Trouble with integrating ng2-highcharts - highcharts

Question

I am trying to use ng2-highcharts in my application. But after importing the necessary classes using the statement
import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts';**
if I try to specify these classes in the array of directives in my component (directives: [Ng2Highcharts]), I am getting the following error in my console.
[TypeError: require is not a function][1]
My System.config looks as follows
System.config
Can someone tell me what I am missing here ?

Answer 1

You need to define 'ng2-highchart' within your SystemJS configuration:
<script>
System.config({
map: {
'ng2-highchart': 'node_modules/ng2-highchart'
},
(...)
});
</script>
See this question for more details:
How to use highcharts with angular 2?

Answer 2

Here is my candlestick sample... see if this helps.
import { Component } from '#angular/core';
import {JSONP_PROVIDERS, Jsonp} from '#angular/http';
import { CHART_DIRECTIVES } from 'angular2-highcharts';
#Component({
selector: 'high-chart',
directives: [CHART_DIRECTIVES],
providers: [JSONP_PROVIDERS],
template: `
<h2> This is HighChart CandleStick component </h2>
<chart type="StockChart" [options]="options3"></chart>
`
})
export class HighChartsComponent {
options3: Object;
constructor(jsonp : Jsonp) {
jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => {
this.options3 = {
title : { text : 'CandleSticks' },
rangeSelector : {
selected : 1
},
series : [{
type : 'candlestick',
name : 'CandleSticks',
data : res.json(),
dataGrouping : {
units : [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
},
tooltip: {
valueDecimals: 2
}
}]
};
});
}

Answer 3

Remove format: 'register' from you packages. This will help it detect the right format. Or you can add the format as follows:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
"node_modules/ng2-highcharts": {
format: 'cjs',
defaultExtension: 'js'
}
},
map: {
"ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
},
paths: {
"ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
}
});