Implementing Google Calendar API with Angular 2

3
votes

I have tried to connect to the Google Calendar API using Angular 2 so that I can display upcoming events on the web application I am building. I ran through the Google Calendar JavaScript quick-start tutorial and, although everything was in the index.html file, it all worked perfectly. I was able to set up the Google API and place the client ID and API key in my JavaScript code and it properly listed upcoming events from the specified calendar.

Link to the quick-start tutorial: https://developers.google.com/google-apps/calendar/quickstart/js

Once I got the JavaScript tutorial to work, I tried to simply implement the same functionality using Angular2, using components/services rather than just raw JavaScript in a script tag in the index.html file. I am about halfway successful.

The problem: I am getting errors stating "Cannot find name 'gapi'".

When I hit the page that calls the code to load the Google Calendar information for the first time, I get these errors stating that gapi is not defined. gapi exists several places in the code, specifically in services that authenticate and retrieve the event data from the Google Calendar API, respectively. However, if I leave that page and come back, the data will come through without error. I have tried loading the proper script tag in index.html using async, etc., as follows:

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

How do I solve this problem? My code is very similar to that seen in the repository linked below:

https://github.com/stefanreichert/angular2-google-calendar-example

2
javascriptangulartypescriptgoogle-apigoogle-calendar-api

2 Answers

2
votes

The problem was trying to retrieve the data from the Google Calendar API before authentication was finished. Using another promise to then load the data after authentication was finished successfully retrieved the event data I was looking for.

Also, it was seemingly helpful to npm install --save @types/gapi, npm install --save @types/gapi.auth2, and declare var gapi: any anywhere I wanted to make calls to gapi in services/components.

1
votes

TypeScript and Javascript are different things. TypeScript can't compile JS, it only knows about TypeScript. So when you try to use a global JS (runtime) object, TypeScript know nothing about it (as it is only compile-time). So you need to a way to just declare the global gapi. You could just use an arbitrary declare. Some will go this route. You can just add the following in your TypeScript file

import { } from '..'

declare var gapi: any;

@Component({..})

Or better yet, just install the typings. This will add the global typing and you will get compile-time checking on the Google API

npm install --save-dev @types/gapi

It's possible you might need a restart of the IDE after installing this. I know I do sometimes.