Angular - 如何导入 googleapis 库? [英] Angular - How to import googleapis library?

问题描述

我正在尝试将 Google Drive API 合并到我的一个项目中.Node.js 快速入门指南要求我导入文件读取和 googleapis 库.但是，当我尝试这样做时，在将其导入 app.module.ts 或任何组件时遇到了问题:组件导入代码:

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 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'

如何在 Angular 中正确导入 googleapis 库?我已经尝试将以下脚本导入添加到 index.html 中，因为很多人在线建议，但它似乎不起作用(请参阅评论).

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

推荐答案

googleapis(和 google-auth-library)是一个 NodeJS 库.您不能按原样在前端项目中使用它.有一些解决方法 - 请参阅 https://medium.com/angular-in-depth/google-apis-with-angular-214fadb8fbc5(但我没有亲自尝试，所以不能推荐).
您提到的另一个库 - https://apis.google.com/js/api.js - 是正确的，它用于前端，但它不是模块化的，它只是您需要通过脚本标签加载的一个大脚本.那是因为您不能通过 import 导入它.为了让 TS 编译器满意(前提是您已经安装了类型 @types/gapi*)，将此导入添加到您访问 gapi 全局对象的文件中:

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" />

这篇关于Angular - 如何导入 googleapis 库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！