I want to integrate highstock (highstock.js in highcharts) into my jHipster project. Hence I added the following to my bower.json:
"dependencies": {
"highcharts" : "4.2.6",
"highcharts-ng": "0.0.12"
},
"overrides": {
"highcharts-ng": {
"dependencies": {
"angular": "1.5.8",
"highcharts": "4.2.6"
}
}
}
When I build my project with this configuration gulp imports the javascript dependencies in index.html file like this:
<script src="bower_components/highcharts/highcharts.js"></script>
<script src="bower_components/highcharts/highcharts-more.js"></script>
<script src="bower_components/highcharts/modules/exporting.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
But what I actualy need is only highstock.js: Highcharts project overview
How can I control, what gets imported here?
The solution lies in the used gulp plugin "main-bower-files" which is used by jHipster and documented here.
The gulp build script decides based on the highcharts/bower.json file what it imports. In the case of highcharts the following is specified:
{
"name": "highcharts",
"version": "v4.2.6",
"main": [
"highcharts.js",
"highcharts-more.js",
"modules/exporting.js"
]
}
If you want to overriede this you can do so in your project bower.json in the "overrieds" section and specify which javascript it should import:
"dependencies": {
"highcharts" : "4.2.6",
"highcharts-ng": "0.0.12"
},
"overrides": {
"highcharts": {
"main": "highstock.js"
},
"highcharts-ng": {
"dependencies": {
"angular": "1.5.8",
"highcharts": "4.2.6"
}
}
}