Angular8：编译器"cannot find name 'gapi'"

Question

在我被标记为重复之前，我已经尝试了一个非常相似的问题的解决方案 and updated the typings in my comiplerOptions in tsconfig.json as 。

基本上我已经创建了一个 Angular 服务（Angular 8，这就是为什么以前的解决方案可能不起作用的原因）调用 Google Api (gapi ) Google 登录。

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private router: Router) { }

  gapi: any; //solution from link one which allows me to run it locally

  googleInit() {
    gapi.load('auth2', () => {
      gapi.auth2.init({
        ...
      })
    });
  }
  ... (other gapi calls)

}

即使编译器出现错误消息，此服务在我的本地服务器 (localhost:4200) 上也完全正常工作。

 ERROR in src/app/shared/services/user/user.service.ts(25,12): error TS2663: Cannot find name 'gapi'. Did you mean the instance member 'this.gapi'?

但是，当我尝试运行 npm run build 将其部署在服务器上时，编译器崩溃并显示“This is probably not a problem with npm. There is likely additional logging output above.”

日志显示为

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/usr/local/Cellar/node/12.4.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.10.2
3 info using node@v12.4.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle pos@0.0.0~prebuild: pos@0.0.0
6 info lifecycle pos@0.0.0~build: pos@0.0.0
7 verbose lifecycle pos@0.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle pos@0.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/jho/TzuChi/taurus/flaskr/static/pos/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Frameworks/Mono.framework/Versions/Current/Commands
9 verbose lifecycle pos@0.0.0~build: CWD: /Users/jho/TzuChi/taurus/flaskr/static/pos
10 silly lifecycle pos@0.0.0~build: Args: [ '-c', 'ng build' ]
11 silly lifecycle pos@0.0.0~build: Returned: code: 1  signal: null
12 info lifecycle pos@0.0.0~build: Failed to exec build script
13 verbose stack Error: pos@0.0.0 build: `ng build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:326:16)
13 verbose stack     at EventEmitter.emit (events.js:200:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:200:13)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid pos@0.0.0
15 verbose cwd /Users/jho/TzuChi/taurus/flaskr/static/pos
16 verbose Darwin 18.7.0
17 verbose argv "/usr/local/Cellar/node/12.4.0/bin/node"    "/usr/local/bin/npm" "run" "build"
18 verbose node v12.4.0
19 verbose npm  v6.10.2
20 error code ELIFECYCLE
21 error errno 1
22 error pos@0.0.0 build: `ng build`
22 error Exit status 1
23 error Failed at the pos@0.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

非常感谢您的反馈。

Answer 1

事实证明我错误地实施了第一个 link。答案是在服务外声明变量gapi: any。

declare var gapi: any; //this is the key

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private router: Router) { }
  ... 
}

Angular8：编译器"cannot find name 'gapi'"

Angular 8: Compiler "cannot find name 'gapi'"

typescript

angular8

google-api-js-client