title: Angular 6 Google login - 'gapi.load is not a function' error
body: <p>So of course I found a solution as I was writing this answer after hours of effort beforehand. The question is now why this would have worked in some environments and not others.</p>
  
  <p>ORIGINAL QUESTION:</p>
  
  <p>The following code works in Chrome incognito but not in non-incognito or Safari whether private/incognito or not.</p>
  
  <p>What is more baffling is that it works for my colleagues in both browsers.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>// have tried with 'async defer'
  &lt;script src="https://apis.google.com/js/platform.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre><code>declare const gapi: any;
  ...
   ngAfterViewInit() {
    // just to be sure gapi has loaded. have tried without timeout
    setTimeout(() =&gt; this.googleInit(), 1000);
  }
  googleInit() {
    gapi.load('auth2', () =&gt; {    // error here
      this.auth2 = gapi.auth2.init({
  </code></pre>
  
  <p><strong>Chrome ERROR</strong></p>
  
  <pre><code>ERROR TypeError: gapi.load is not a function
  at LoginComponent.push../src/app/login/login.component.ts.LoginComponent.googleInit (login.component.ts:36)
  </code></pre>
  
  <p><br>
  SOLUTION:
  adding the following to index.html:</p>
  
  <pre><code>&lt;script src="https://apis.google.com/js/api.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is not in the official google guide and is missing from most examples I have found. I am interested to know why it was necessary here.</p>