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

Question

Before I get marked for duplicate, I have already tried the solution to a very similar problem here and updated the typings in my comiplerOptions in tsconfig.json as this solution.

Basically I have created an Angular Service (Angular 8, which is why the previous solutions might not have worked) that calls the Google Api (gapi) for Google SignIn.

@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)

}

This service works completely fine on my local server (localhost:4200) even though there is an error message from the compiler.

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

However, when I try to run npm run build to deploy it on a server, the compiler crashes and displays "This is probably not a problem with npm. There is likely additional logging output above."

The log is displayed as

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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~build: CWD: /Users/jho/TzuChi/taurus/flaskr/static/pos
10 silly lifecycle [email protected]~build: Args: [ '-c', 'ng build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build: `ng build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Thank you so much for any feedback.

Answer 1

Turns out I was implementing the first link incorrectly. The answer was to declare the variable gapi: any outside of the service.

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

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

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