ngUpgrade two versions of Highcharts, error 16

Question

I have an upgraded app to use ngUpgrade which is working well so far, but I've run into a problem trying to incorporate Highcharts.

The original app has a different version of highcharts included (an older one for AngularJS).

The new (hybrid remember) app using Angular has a different version of highcharts.

When using them both, I run into an error #16, Highcharts already instantiated, which makes sense.

My question is, how do I avoid this?

If I remove the old highcharts, the old app won't detect the new angular highcharts. If I remove the new one, trying to access the highcharts reference via the window object doesn't work because highcharts can't seem to detect the template for the new angular and has no idea how to use it.

Has anyone put together a hybrid app with highcharts on both parts of the app (old and new)?

Answer 1

Highcharts object is saved in Highcharts property of the Window object. Highcharts checks if it's already defined in this property and throws the error 16 if it's true.

Solution:

You can try saving one of the versions of Highcharts in some other property and clearing Window.Highcharts before loading the other version:

HTML:

<script src="https://code.highcharts.com/4.2.2/highcharts.src.js"></script>
<script>
  this.HighchartsOld = this.Highcharts;
  this.Highcharts = null;
</script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="container1" style='height: 200px'></div>
<div id="container2" style='height: 200px'></div>

JS:

var chart = Highcharts.chart('container1', {
  series: [{
    data: [1, 2]
  }]
});

var chart = HighchartsOld.chart('container2', {
  series: [{
    data: [1, 2]
  }]
});

Live demo: http://jsfiddle.net/BlackLabel/2x7ys9eo/