I have tried to connect to the Google Calendar API using Angular 2 so that I can display uping 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 uping events from the specified calendar.

Link to the quick-start tutorial:

Once I got the JavaScript tutorial to work, I tried to simply implement the same functionality using Angular2, using ponents/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 e back, the data will e through without error. I have tried loading the proper script tag in index.html using async, etc., as follows:

<script src=".js?onload=checkAuth" async></script>

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

I have tried to connect to the Google Calendar API using Angular 2 so that I can display uping 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 uping events from the specified calendar.

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

Once I got the JavaScript tutorial to work, I tried to simply implement the same functionality using Angular2, using ponents/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 e back, the data will e through without error. I have tried loading the proper script tag in index.html using async, etc., as follows:

<script src="https://apis.google./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./stefanreichert/angular2-google-calendar-example

• javascript
• angular
• typescript
• google-api
• google-calendar-api

Share Improve this question Follow asked Nov 5, 2016 at 5:00 cbrawlcbrawl 98511 gold badge1212 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/ponents.

TypeScript and Javascript are different things. TypeScript can't pile 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 pile-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 pile-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.