CODEWITHSUNDEEP
angulargoogle-drive-api
david30xie
david30xie

Reputation: 956

'drive' does not exist on type 'typeof client'

Angular 5 cannot find drive from gapi.client. What I have done is:

package.json:

"@types/gapi.client.drive": "^3.0.0",

tsconfig.app.json:

"types": ["gapi.auth2", "gapi.client", "gapi.client.drive"]

index.html:

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

Both my editor(VS Code) and Angular report an error like below:

Property 'drive' does not exist on type 'typeof client'

, but console.log(gapi.client.drive.files); can get everything I need.

Am I missing any library here?

Upvotes: 4

Views: 2091

Answers (3)

Ihor Z.
Ihor Z.

Reputation: 1

Installing @types/gapi.client.sheets solved this issue for me

Upvotes: 0

Harrison O
Harrison O

Reputation: 1210

One possible way to solve this problem of gapi and gapi.auth in Angular is by installing the type script definitions using NPM. 

npm install --save @types/gapi
npm install --save @types/gapi.auth2

In tsconfig.json or tsconfig.app.json within compilerOptions section add this "gapi", "gapi.auth2" to types. It will look like 

"types": ["gapi", "gapi.auth2"],

Then in you service or component, use NgZone, you import it from @angular/core

Here is example:

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

@Component({
  selector: 'app-google-app',
  templateUrl: './google-app.component.html',
  styleUrls: ['./google-app.component.scss']
})
export class GoogleAppComponent implements OnInit, AfterViewInit {

constructor(private ngZone: NgZone) { }

ngAfterViewInit() {
    this.ngZone.run(() => {
        // example to render login button
        gapi.signin2.render('my-signin2', {
        ...
        ...
        });

        // example to load client
        gapi.load('client', {
         ...
         ...
        });

    });
  }    
}

Angular NgZone documentation... read more

In index.html, depending what you want, you may need to add the following within the <head></head> tag

<meta name="google-signin-client_id" content="xxxxxxxxxx.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
<script src="https://apis.google.com/js/api.js"></script>

Upvotes: 1

Suraj Mathe
Suraj Mathe

Reputation: 95

make sure you install the all these plugins.

npm install --save @types/gapi
npm install --save @types/gapi.auth2
npm install --save @types/gapi.client.drive

and in tsconfig.app.json in compileroptions section 

"types": ["gapi", "gapi.auth2" ,"gapi.client", "gapi.client.drive"]

and in index.html file you need to add this js.

 <script src="https://apis.google.com/js/api.js"></script>

Upvotes: 5

Related Questions