Google Drive API in Angular2/Ionic2 gapi.client.drive

I write Angular2/Ionic2 app to show list and upload file to Google Drive. Login with Google works fine but gapi.client.drive got undefined. What should I do to solution it or have method instead?

I installed

npm install --save @types/gapi

npm install --save @types/gapi.auth2

And my code home.ts

import { Component, NgZone } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Http, Headers } from '@angular/http';

import { DriveService } from '../../services/drive.service';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ DriveService ]
})
export class HomePage {
  googleLoginButtonId = "google-login-button";
  userAuthToken = null;
  userDisplayName = "empty";
    auth2: any;

  constructor(public navCtrl: NavController, private _zone: NgZone, private driveService: DriveService) {

  }


  start() {
    gapi.load('auth2', () => {
      // Retrieve the singleton for the GoogleAuth library and set up the client.
       this.auth2 = gapi.auth2.init({
        client_id: 'xxx.googleusercontent.com',
        scope: 'https://www.googleapis.com/auth/drive'
      });
      this.attachSignin(document.getElementById('customBtn'));
    });
  };

  attachSignin(element) {
    console.log(element.id);
    this.auth2.attachClickHandler(element, {},
        (googleUser) => {

         this._zone.run(() => {
          this.userAuthToken = googleUser.getAuthResponse().id_token;
          this.userDisplayName = googleUser.getBasicProfile().getName();
        });
        },(error) => {
          alert(JSON.stringify(error, undefined, 2));
        });
  }


  signOut() {
    this.auth2 = gapi.auth2.getAuthInstance();

    this.auth2.signOut().then(() => {
      console.log('User signed out.');
       this._zone.run(() => {
        this.userAuthToken = null;
        this.userDisplayName = "empty";
      });
    });

  }

 listFile() {
        var request = gapi.client['drive'].files.list({
            'pageSize': 10,
            'fields': "nextPageToken, files(id, name)"
          });

          request.execute(function(resp) {
            this.appendPre('Files:');
            var files = resp.files;
            if (files && files.length > 0) {
              for (var i = 0; i < files.length; i++) {
                var file = files[i];
                this.appendPre(file.name + ' (' + file.id + ')');
              }
            } else {
              this.appendPre('No files found.');
            }
          });
  }

  appendPre(message) {
    var pre = document.getElementById('output');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="start()">Start</button>
  <button ion-button (click)="signOut()">Logout</button>
  <div class="main-application">
    <p>Hello, {{userDisplayName}}!</p>
  </div>
  <div id="gSignInWrapper">
    <div id="customBtn" class="customGPlusSignIn">
      <span class="icon"></span>
      <button ion-button class="buttonText">Google</button>
    </div>
  </div>

  <button ion-button (click)="listFile()">Get Drive</button>

</ion-content>

My answer: add to index.html Google API library, after <body> tag

 <script src="https://apis.google.com/js/platform.js" async defer></script>

来源：https://stackoverflow.com/questions/39907913/google-drive-api-in-angular2-ionic2-gapi-client-drive

标签

types

ionic2

gapi