Using Highstock with bower and grunt

Question

I have an angular project created with the angular generator https://github.com/yeoman/generator-angular

Bower is set up to minify my vendor dependencies, and I'm having trouble with highcharts.js. I want to tell it to use highstock.js, which is included as part of the highcharts bower package and stored in bower_components/highcharts/highstock.js

Here is what the build section for vendor.js looks like:

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<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>
<!-- endbower -->
<!-- endbuild -->

If I remove the highcharts.js line from the bower build, grunt will put it back. If I rename it, grunt changes it back. I can't install a package called highstock because I don't think that exists. If I load the highstock.js file separately outside of any minification blocks then the site complains that I'm loading overlapping libraries, since you're supposed to use either highstock or highcharts.

What can I do here to tell grunt to include highstock.js instead of highcharts.js?

Answer 1

I had similar situation with HighMaps(At that time, HighMaps was in beta version and we are trying to build prototype using HighMaps and few components of HighMaps had the dependency of HighCharts as well as HighMaps was not released at that time).

So what is the solution ??

The probable solution is to create a git(public) repository for the library(For you Highstocks), push the code to the repository and register that repository as Bower Registration.

Take a look from here - Bower Registration Also try to search some SO post. Check this SO post

After successful bower registration, you'll able to search your package by bower search <package_name> and insert that bower packer to any project.

My package still exists

Github link of my Highmaps version HighMaps-Beta

Bower Search result from my console -

Few things to keep in mind

1. Don't overlap your repository name with the licensed repository.
2. Give enough description of the library while doing Bower Registration. It might be confusing later if there is some official release.
3. If you are doing some serious production level work, you need to check HighCharts License Agreements. Check this SO post regarding this.
4. Be bit careful, when you finished the bower registration and include your bower library to the project, as HighStocks has the dependency on HighCharts. It might be bit difficult to find the dependency.
5. Check AMD. Try to use Commonjs - common.js, require.js to your project. It is easier to tell the project about the dependencies.

Hope it would help to you.