I am encountering an issue while attempting to integrate Google Auth into my Angular(+Express) application using the Google Identity Services library. Despite following the instructions provided in the Google tutorial, I am facing the error: "[ERROR] TS2304: Cannot find name 'google'."
I have added the following code to my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Render</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252273c213c20">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec3dec2">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
I have also included the following code snippet:
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { BehaviorSubject, Observable, catchError, tap } from 'rxjs';
import { User } from '../_interfaces/user';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://localhost:4200',
}),
};
@Injectable({
providedIn: 'root',
})
export class AuthService {
private userSubject = new BehaviorSubject<User | null>(this.getData);
loggedInUser: Observable<User | null>; //
client: any;
access_token: any;
constructor(private http: HttpClient, @Inject(PLATFORM_ID) private platformId: Object) {
this.loggedInUser = this.userSubject.asObservable();
this.init();
}
init() {
this.client = google.accounts.oauth2.initTokenClient({
client_id: '***********',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/contacts.readonly',
callback: (tokenResponse: { access_token: any }) => {
this.access_token = tokenResponse.access_token;
},
});
}
However, I am still facing the error: [ERROR] TS2304: Cannot find name 'google'. [plugin angular-compiler]
I would appreciate any guidance you can provide to resolve this issue. Thank you!