CODEWITHSUNDEEP
node.jsangulargoogle-cloud-platformgoogle-drive-api
manumanuk
manumanuk

Reputation: 53

Angular - How to import googleapis library?

I'm trying to incorporate the Google Drive API into one of my projects. The Node.js quick start guide requires me to import file-reading and googleapis libraries. However, when I try to do so, I run into issues when importing it into app.module.ts or any components: Components import code:

import { Injectable } from '@angular/core';
import {google, drive_v3} from 'googleapis'
const drive = google.drive({version: 'v3'});
@Injectable({
  providedIn: 'root'
})
export class SubscriptionService {
  constructor () {}
}

Error:

ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'child_process' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-auth-library/build/src/crypto/node/crypto.js
Module not found: Error: Can't resolve 'crypto' in '...\node_modules\google-auth-library\build\src\crypto\node'
ERROR in ./node_modules/jwa/index.js
Module not found: Error: Can't resolve 'crypto' in '...\node_modules\jwa'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-p12-pem/build/src/index.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\google-p12-pem\build\src'
ERROR in ./node_modules/googleapis-common/build/src/discovery.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\googleapis-common\build\src'
ERROR in ./node_modules/gtoken/build/src/index.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\gtoken\build\src'
ERROR in ./node_modules/agent-base/patch-core.js
Module not found: Error: Can't resolve 'https' in '...\node_modules\agent-base'
ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'net' in '...\node_modules\https-proxy-agent'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'os' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'path' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/gaxios/build/src/gaxios.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\gaxios\build\src'
ERROR in ./node_modules/google-auth-library/build/src/auth/oauth2client.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/googleapis-common/build/src/apirequest.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\googleapis-common\build\src'
ERROR in ./node_modules/jws/lib/data-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/jws/lib/sign-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/jws/lib/verify-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'tls' in '...\node_modules\https-proxy-agent'

How do I properly import the googleapis library in Angular? I've tried adding the following script import to index.html as lots of people online suggest, but it doesn't seem to work (see comments).

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

I have also made sure to perform the following installs:

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

Upvotes: 4

Views: 5681

Answers (1)

Shrike
Shrike

Reputation: 9500

googleapis (and google-auth-library) is a NodeJS library. You can't use it in front-end projects as is. There're some workarounds - see https://medium.com/angular-in-depth/google-apis-with-angular-214fadb8fbc5 (but I didn't try it personally so can't recommend).
The other lib you mentioned - https://apis.google.com/js/api.js - is the right one, it's for front-end, but it's not modularized, it's just one big script that you need to load via script tag. That's because you cannot import it via import. To make TS compiler happy (providing you already installed types @types/gapi*) add this import in a file where you accessing gapi global object:

/// <reference types="gapi.client. drive" />

Upvotes: 2

Related Questions