gmazzamuto/ng2-google-charts

Chicken and egg loading issues with Angular 9 + ivy

Closed this issue · 1 comments

simeyla commented

Having issues using this with Angular 9 + ivy related to loading the google chart API.

I've been using this library for quite some time, and I need to call certain google.visualization APIs before I have my [data] ready to set on the <google-chart> component. eg.

         var formatter = new google.visualization.NumberFormat({ prefix: '$' });
         var view = new google.visualization.DataView(...);

But of course it isn't loaded at first - so google isn't available. What I did previously was injected the GoogleChartsLoaderService to my own component and just waited for the load promise to resolve. Then I could set data on the component and use whatever google.visualization API calls I needed.

With Angular 9 (or perhaps it was version 5 of charts) this no longer works. I get all kinds of injector errors. It sort of works if I provide my own GoogleChartsLoaderService in my own module but then when I did a production build everything broke again. I think it's something to do with tree shaking but was too difficult to understand exactly what was going on.

In the end I just did this:

 <google-chart (chartReadyOneTime)="chartReady()" [data]="chartData"></google-chart>

where

 chartReady() { this.chartsLoaded.next(true); }
 chartsLoaded = new BehaviorSubject(false);
 chartData = [];

and then I prepare my real data (that uses the google API). This is just clumsy because I have a dozen charts on the page - so I had to just put a 'dummy' one for loading the API.

Is there a way I can inject GoogleChartsLoaderService and access the load promise as before? What's the recommended way to do this?

Possibility: I think it might work if you were to export GoogleChartsLoaderService from the charts module? Then maybe I would be accessing that same instance?