javascript - Using Google API in Angular 2TypeScript - Stack Overflow

A previous question here got me most of the way (hopefully) to getting this working, but I can't seem to get a Google API working from TypeScript. I'm basically following this example:

I'm not seeing an error, the method to run the API call just isn't getting fired.

I've installed the typings for gapi and gapi.auth. initClient() doesn't throw any errors, it just never seems to plete. The current user is signed in as a Google user, but not authorized for the API call yet. That's the next thing I was going to deal with, but right now the call isn't even being made. As you can see below, I added a logging line at the beginning of the method that isn't being called.

initGapiClient() {
    gapi.load('client:auth2', this.initClient);
  }

  initClient() {
    gapi.client.init({
      apiKey: '',
      discoveryDocs: [''],
      clientId: 'xxxxxx.apps.googleusercontent',
      scope: ' .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
    ... 
  }

A previous question here got me most of the way (hopefully) to getting this working, but I can't seem to get a Google API working from TypeScript. I'm basically following this example: https://developers.google./api-client-library/javascript/samples/samples

I'm not seeing an error, the method to run the API call just isn't getting fired.

I've installed the typings for gapi and gapi.auth. initClient() doesn't throw any errors, it just never seems to plete. The current user is signed in as a Google user, but not authorized for the API call yet. That's the next thing I was going to deal with, but right now the call isn't even being made. As you can see below, I added a logging line at the beginning of the method that isn't being called.

initGapiClient() {
    gapi.load('client:auth2', this.initClient);
  }

  initClient() {
    gapi.client.init({
      apiKey: '',
      discoveryDocs: ['https://www.googleapis./discovery/v1/apis/youtube/v3/rest'],
      clientId: 'xxxxxx.apps.googleusercontent.',
      scope: 'https://www.googleapis./auth/youtube https://www.googleapis./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
    ... 
  }

• javascript
• angular
• typescript
• youtube-data-api

Share Improve this question Follow edited Apr 21, 2017 at 6:06 eko 40.7k1111 gold badges7878 silver badges101101 bronze badges asked Apr 21, 2017 at 6:02 beachCodebeachCode 3,54099 gold badges3838 silver badges7272 bronze badges 2

• How do I install the typings for gapi and gapi.auth? – Plastic Commented Feb 28, 2018 at 9:45
• @Plastic npm install --save @types/gapi and also @types/gapi.auth2. Just Google it, you'll find these: npmjs./package/@types/gapi.auth2 – beachCode Commented Mar 2, 2018 at 0:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Change

.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 function your this will not refer to your ponent and passing a function as a parameter like .listen(this.updateSigninStatus); will also make the outer this to be binded to this function.

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

After messing around with this, I found that a better sample for my use case was this one: https://cloud.google./pute/docs/tutorials/javascript-guide

Note that I am using the first suggestion as well:

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

I was able to get everything working after I realized that I had to init gapi.auth with everything I wanted the first time--I thought I could just authorize again later with different scopes. I'm now doing it in index.html like this:

    var PROJECT_ID = 'projectname';
    var CLIENT_ID = 'xxxx.apps.googleusercontent.';
    var API_KEY = '1234';
    var SCOPES = 'https://www.googleapis./auth/youtube https://www.googleapis./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');
          }
        }
      );
     }