Angular 6 Google 登录 - 'gapi.load is not a function' 错误

Question

所以我当然找到了解决方案，因为我事先经过数小时的努力才写下这个答案。现在的问题是，为什么这在某些环境中有效，而在其他环境中无效。

原始问题：

以下代码在 Chrome incognito 中有效，但在非 incognito 或 Safari 中无效，无论 private/incognito 与否。

更令人费解的是，它对我的​​同事在两种浏览器中都适用。

index.html

// have tried with 'async defer'
<script src="https://apis.google.com/js/platform.js"></script>

login.component.ts

declare const gapi: any;
...
 ngAfterViewInit() {
  // just to be sure gapi has loaded. have tried without timeout
  setTimeout(() => this.googleInit(), 1000);
}
googleInit() {
  gapi.load('auth2', () => {    // error here
    this.auth2 = gapi.auth2.init({

Chrome 错误

ERROR TypeError: gapi.load is not a function
at LoginComponent.push../src/app/login/login.component.ts.LoginComponent.googleInit (login.component.ts:36)

解决方案： 将以下内容添加到 index.html:

<script src="https://apis.google.com/js/api.js"></script>

这不在官方 google 指南中，并且在我找到的大多数示例中都没有。我很想知道为什么这里有必要。

Answer 1

要使用 google api 模块，我们必须导入

<script src="https://apis.google.com/js/api.js"></script>

官方文档中也提到了这一点：

https://developers.google.com/api-client-library/javascript/samples/samples

Answer 2

也许您可以尝试 ng-gapi 库轻松集成 Google 登录 Angular 项目。