Angular项目报ReferenceError: gapi is not defined 所有方案尝试无效如何解决

1 修复运行时gapi未定义问题 #

你当前最大的问题是将<script>标签放在组件HTML的<head>中，Angular会默认过滤组件模板内的所有script标签，所以这段引入根本没有生效。

• 方案1：全局引入
  将<script src="https://apis.google.com/js/api.js"></script>直接添加到项目根目录下index.html的<head>标签内，这是最稳妥的全局加载方式。
• 方案2：组件内动态加载（不需要全局引入）
  在组件内封装异步加载逻辑，确保调用gapi前资源已加载完成，代码示例：

import { Component, AfterViewInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  // 你的组件配置
})
export class YourComponent implements AfterViewInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  async ngAfterViewInit() {
    // SSR环境下跳过加载
    if (!isPlatformBrowser(this.platformId)) return;

    await this.loadGapiAsync();
    gapi.load('auth2', () => console.log('test'));
  }

  private loadGapiAsync(): Promise<void> {
    return new Promise((resolve) => {
      // 已加载过直接返回
      if (window.gapi) {
        resolve();
        return;
      }
      const script = document.createElement('script');
      script.src = 'https://apis.google.com/js/api.js';
      script.onload = () => resolve();
      document.head.appendChild(script);
    });
  }
}

2 修复TypeScript类型报错问题 #

你之前的类型配置方式大概率不生效，按以下步骤调整：

• 先确认已安装类型包：npm i @types/gapi @types/gapi.auth2 --save-dev
• 在项目src根目录新建typings.d.ts文件（如果已有则直接追加），添加以下内容：

declare interface Window {
  gapi: typeof import('gapi');
}
declare var gapi: typeof import('gapi');

• 不需要在tsconfig的types字段添加配置，也不需要加三斜杠引用指令，以上全局类型声明会自动生效。

3 常见问题排查 #

• 如果使用Angular SSR（服务端渲染），必须加上isPlatformBrowser判断，服务端没有window对象，直接调用会报错。
• 如果项目配置了CSP（内容安全策略），需要将apis.google.com添加到允许的脚本加载源列表中。

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