Using the Google APIs in Angular 2 / TypeScript

Question

The previous question here gave me most of the way (hopefully) for this to work, but I can't get the Google APIs working with TypeScript. I basically follow this example: https://developers.google.com/api-client-library/javascript/samples/samples

I don’t see an error, the method of starting the API call simply does not start.

I set typing for gapi and gapi.auth. initClient() does not cause any errors, it just never terminates. The current user subscribes as a Google user, but is not yet allowed to call the API. This is the next thing I was going to deal with, but now the call has not even been made. As you can see below, I added a logging line at the beginning of the method, which is not called.

 initGapiClient() { gapi.load('client:auth2', this.initClient); } initClient() { gapi.client.init({ apiKey: '', discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'], clientId: 'xxxxxx.apps.googleusercontent.com', scope: 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly' }).then(function () { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus); // Handle the initial sign-in state. this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); }); } updateSigninStatus(isSignedIn) { if (isSignedIn) { this.listPlaylists(); } else { alert("Can't sign in"); } } listPlaylists() { console.log("Called listPlaylists"); ... API call here ... } 

Answer 1

After messing with this, I found that the best example for my use case was the following: https://cloud.google.com/compute/docs/tutorials/javascript-guide

Note that I also use the first sentence:

 gapi.auth2.getAuthInstance().isSignedIn.listen(status => this.updateSigninStatus(status)); 

I managed to get everything that was after I realized that I need to start gapi.auth first with everything that I wanted for the first time - I thought that I could just resolve it later with different areas. Now I do it in index.html as follows:

  var PROJECT_ID = 'projectname'; var CLIENT_ID = 'xxxx.apps.googleusercontent.com'; var API_KEY = '1234'; var SCOPES = 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly'; /** * Authorize Google Compute Engine API. */ function authorization() { gapi.client.setApiKey(API_KEY); gapi.auth.authorize({ client_id: CLIENT_ID, scope: SCOPES, immediate: false }, function(authResult) { if (authResult && !authResult.error) { window.alert('Auth was successful!'); } else { window.alert('Auth was not successful'); } } ); } 

Answer 2

Edit

 .then(function () { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus); // Handle the initial sign-in state. this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); }); 

to

 .then(()=> { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus.bind(this)); // Handle the initial sign-in state. this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); }); 

if you use a function, your this will not refer to your component, and passing the function as a parameter, such as .listen(this.updateSigninStatus); , will also bind the external this to this function.

I suggest you read: How to access the correct `this` context inside a callback?