Javascript 用Angular 2实现Google日历API

我尝试使用Angular 2连接到Google日历API，以便在我正在构建的web应用程序上显示即将到来的事件。我浏览了GoogleCalendarJavaScript快速入门教程，尽管所有内容都在

index.html

文件中，但都运行得非常好。我能够设置GoogleAPI，并将客户机ID和API键放入我的JavaScript代码中，它正确地列出了指定日历中即将发生的事件

链接到快速入门教程：

一旦JavaScript教程开始工作，我就尝试使用Angular2实现相同的功能，使用组件/服务，而不仅仅是

index.html

文件中的脚本标记中的原始JavaScript。我大约成功了一半

问题：我遇到错误，指出

“找不到名称'gapi'”

当我第一次点击调用代码来加载Google日历信息的页面时，我得到了这些错误，指出没有定义

gapi

<代码>gapi在代码中存在多个位置，特别是在分别从Google日历API验证和检索事件数据的服务中。但是，如果我离开该页面并返回，数据将无误地通过。我已尝试使用async等在

index.html

中加载适当的脚本标记，如下所示：

<script src="https://apis.google.com/js/client.js?onload=checkAuth" async></script>

我如何解决这个问题？我的代码与下面链接的存储库中的代码非常相似：

---

类型脚本和Javascript是不同的东西。TypeScript不能编译JS，它只知道TypeScript。因此，当您尝试使用全局JS（运行时）对象时，TypeScript对此一无所知（因为它只是编译时）。因此，您需要找到一种方法来声明全局

gapi

。您可以使用任意的

声明
。有些人会走这条路。您只需在TypeScript文件中添加以下内容

import { } from '..'

declare var gapi: any;

@Component({..})

或者更好的是，只需安装打字。这将添加全局类型，并在GoogleAPI上进行编译时检查

npm install --save-dev @types/gapi

安装此软件后，您可能需要重新启动IDE。我知道我有时会这样做。
问题是在身份验证完成之前试图从Google日历API检索数据。使用另一个承诺，在身份验证完成后加载数据，成功地检索到我正在查找的事件数据

另外，
npm安装--save@types/gapi
，
npm安装--save@types/gapi.auth2
，以及
声明var-gapi:any
在服务/组件中我想调用
gapi
的任何地方似乎都很有帮助。
感谢您的回复。不幸的是，
npm安装路径无法工作。我相信全局变量的想法可能会奏效，但当你说“只需将以下内容添加到你的TypeScript文件中”时，你指的是哪个文件？另外，在全局定义之后还需要什么吗？如果您不使用全局打字文件，我认为您需要在使用它的任何文件中声明它。不，不需要其他任何东西。但是我不知道为什么
@类型
不起作用。我把
declare var gapi:any
放在我调用
gapi.more.stuff
的服务组件中，虽然当我启动npm时，错误从命令行消失了，但当我点击页面本身时，错误仍然在发生。我仍然未捕获（承诺中）：TypeError:无法在开发人员控制台中读取未定义的
的属性“事件”。有什么想法吗？我想是因为google脚本是异步加载的。这是必需的吗？您指的是加载到
index.html
文件中的
client.js
脚本吗？即使从标记中删除
async
，我也会收到相同的错误。我认为数据是在第二次加载而不是第一次加载时通过的，这很重要，但我不知道为什么。