Not working with Ionic3 - (void 0) is not a function

[butters16]

I am able to get it working with a new Angular4 application, but cannot get it to work with a new Ionic3 applications (using Angular4). I've created a repo to demonstrate: https://github.com/butters16/google-chart-using-ionic3

Steps to reproduce

1. create blank project using ionic3 cli
2. install google-chart npm install angular2-google-chart
3. modify app.module.ts to import GoogleChart and add it to declarations
4. override home.ts compnent to look like angular2-google-chart README

Error looks like this

platform-browser-dynamic.es5.js:170 Uncaught TypeError: (void 0) is not a function
    at Object.<anonymous> (platform-browser-dynamic.es5.js:170)
    at __webpack_require__ (bootstrap 3cf6321…:19)
    at Object.<anonymous> (src async:7)
    at __webpack_require__ (bootstrap 3cf6321…:19)
    at Object.<anonymous> (main.js:111954)
    at __webpack_require__ (bootstrap 3cf6321…:19)
    at bootstrap 3cf6321…:65
    at bootstrap 3cf6321…:65

[Natanael1234]

Same problem since Ionic 2.

[cetinahmetemre]

could you solve this problem?

[buyitnexttime]

Short answer: no, I could not solve the problem so I am not using angular2-google-chart.

Long answer: I'm turned off to using projects that wrap existing javascript functionality for angular consumption. There seems to be this constant cat-and-mouse game of waiting for support after each release and then having to debug the inconsistencies myself. Even if everything works, libraries like Google Charts already have tons of great documentation with examples, but I can't use any of it until I figure out how to translate it for the wrapper library. I see some value in the wrappers, but if they don't work right away or impose too much deviation from the original library, I just fallback to using the straight javascript as I did in this case. I've included the snippets below for how to do that.

index.html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
</script>

some-component.html

<div id="some-unique-id"></div>

some-component.ts declare var google;

let chart = new google.visualization.ComboChart(document.getElementById('some-unique-id'));

chart.draw(data, options);

Admittedly, this could use some error handling for if Google Charts does not load in time (or ever).