Angular 17集成Google Auth遇TS2304错误：找不到‘google’如何解决？

这个错误是因为TypeScript无法识别全局的google对象，同时异步加载的GSI脚本可能在Angular服务初始化时还未加载完成，以下是具体解决步骤：

1. 添加全局类型声明（快速临时方案） #

在你的AuthService文件顶部添加全局变量声明，告诉TypeScriptgoogle是一个全局可用对象：

declare var google: any;

// 下面是你的AuthService原有代码
import { HttpClient, HttpHeaders } from '@angular/common/http';
// ... 其他导入内容

2. 安装官方类型定义包（推荐，获得完整类型提示） #

为了获得类型校验和智能提示，安装Google Identity Services的官方TypeScript类型包：

npm install @types/google.accounts --save-dev

安装完成后，TypeScript会自动识别google对象的类型，无需手动声明any。

3. 确保GSI脚本加载完成后再初始化Client #

由于你使用async defer加载脚本，Angular服务的constructor执行时，脚本可能还未加载完成，导致google未定义。修改AuthService中的初始化逻辑，确保只在浏览器环境且google对象存在时执行初始化：

constructor(private http: HttpClient, @Inject(PLATFORM_ID) private platformId: Object) {
  this.loggedInUser = this.userSubject.asObservable();
  // 不在构造函数直接调用init，改为等待脚本加载完成
  if (isPlatformBrowser(this.platformId)) {
    // 监听window加载完成事件，确保GSI脚本已加载
    window.addEventListener('load', () => {
      this.init();
    });
    // 立即检查，如果脚本已提前加载完成则直接初始化
    if (typeof google !== 'undefined') {
      this.init();
    }
  }
}

init() {
  // 双重校验，避免未加载完成时执行
  if (typeof google === 'undefined') return;
  
  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;
    },
  });
}

另外，你在index.html中设置的onload="initClient()"会报错，因为全局环境找不到Angular服务里的initClient函数，建议移除这个属性。

内容的提问来源于stack exchange，提问作者Yurii Pinchuk