title: Angular - Google Chart rendering fails on page refresh
body: <p>I am using google chart to render charts on my angular app. This works fine for first time page visit but as soon as I refresh the page. The variables such as googleLoaded and and google becomes undefined.</p>
  
  <p>I have used directive code from <a href="https://github.com/vimalavinisha/angular2-google-chart/" rel="nofollow noreferrer">https://github.com/vimalavinisha/angular2-google-chart/</a></p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;script src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;script&gt;  
      var googleLoaded = false;
      var googleChartsPackagesToLoad = ['geochart'];
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Here is the stackblitz url:</strong> <a href="https://stackblitz.com/edit/angular-3av4p7" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-3av4p7</a></p>
  
  <p><strong>Error on console:</strong> 
  <a href="https://i.stack.imgur.com/1tCv6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1tCv6.jpg" alt="Error on console"></a></p>