I'm mapping highcharts-more to the system variable:
'highcharts-more': 'node_modules/highcharts/highcharts-more.src.js' However it constantly gives me an error of:
Error in dev/process/templates/detail.template.html:40:33 ORIGINAL EXCEPTION: Error: Highcharts error #17: www.highcharts.com/errors/17 Does anyone has an idea how I could fix it so I could use boxplot type of chart?
var map = { ... 'angular2-highcharts': 'node_modules/angular2-highcharts', 'highcharts/highstock.src': 'node_modules/highcharts/highstock.js', 'highcharts/highcharts-more.js': 'node_modules/highcharts/highcharts-more.js', ... } import {CHART_DIRECTIVES} from 'angular2-highcharts'; import {Highcharts} from 'angular2-highcharts'; require('highcharts/highcharts-more.js')(Highcharts); @Component({ ... }) export class CompareMeasureComponent implements OnInit { ... } it's work :)
I have spent quite some time on this one. I finally found an answer in https://github.com/gevgeny/angular2-highcharts/issues/21
While I'm using angular2-highcharts package, there has to be a line of requirement included into Highcharts.js file.
require('../../highcharts/highcharts-more.js')(Highcharts); This solved my issue.
You can do the following:
declare var require: any; var Highcharts = require('highcharts'); require('highcharts/highcharts-more.js')(Highcharts); export { Highcharts };Highcharts #17 error means, your mapping did not work and highcharts-more.js did not load correctly. Try this;
'highcharts-more': 'http://code.highcharts.com/highcharts-more.js' 
jquery, highcharts and highcharts-more with this order?I was facing the same problem and resolved using below line of code in my component class:
const Highcharts = require('highcharts'); require('highcharts/highcharts-more')(Highcharts); and below line of code in SystemJs.Config.js
'highcharts/highcharts-more': "npm:highcharts/highcharts-more.js" 