How are the bower dependencies in jHipster organized?

Question

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?

Answer 1

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