Angular中renderButton失效，谷歌登录按钮无法显示

此前谷歌登录功能运行正常，现在Angular项目中的谷歌登录按钮突然无法显示，控制台报错指向renderButton代码行。

相关代码 #

login.component.ts #

ngAfterViewInit() {
        google.accounts.id.initialize({
            client_id: 'XXXXX',
            callback: this.handleCredentialResponse.bind(this),
            auto_select: false,
            cancel_on_tap_outside: true,

        });
        
        google.accounts.id.renderButton(
            document.getElementById('google-button'),
            { theme: 'filled_blue', size: 'large', width: '215' }
        );
 }

login.component.html #

<div id="google-button"></div>

已尝试无效方案 #

• 将代码从ngAfterViewInit移至ngOnInit；
• 在ngAfterViewInit中用setTimeout(()=> { // 代码内容 })包裹代码。

解决建议 #

1. 用Angular ViewChild替代原生DOM查询
   原生document.getElementById可能存在DOM元素未完全初始化的问题，改用Angular的ViewChild更可靠：

   • 组件类中添加：

     import { ViewChild, ElementRef } from '@angular/core';
     
     // ...
     
     @ViewChild('googleButton') googleButton!: ElementRef;
     

   • 模板修改为：

     <div #googleButton></div>
     

   • ngAfterViewInit中更新渲染逻辑：

     google.accounts.id.renderButton(
         this.googleButton.nativeElement,
         { theme: 'filled_blue', size: 'large', width: '215' }
     );
     

2. 确认谷歌登录脚本加载状态
   检查index.html中的谷歌登录脚本是否正确加载，确保是异步延迟加载：

   <script src="https://accounts.google.com/gsi/client" async defer></script>
   

   如果脚本加载时机不稳定，可以在组件中动态加载脚本，确保脚本加载完成后再执行初始化：

   loadGoogleScript() {
     const script = document.createElement('script');
     script.src = 'https://accounts.google.com/gsi/client';
     script.async = true;
     script.defer = true;
     script.onload = () => {
       this.initGoogleAuth();
     };
     document.body.appendChild(script);
   }
   
   ngAfterViewInit() {
     this.loadGoogleScript();
   }
   
   initGoogleAuth() {
     google.accounts.id.initialize({
       client_id: 'XXXXX',
       callback: this.handleCredentialResponse.bind(this),
       auto_select: false,
       cancel_on_tap_outside: true,
     });
     
     google.accounts.id.renderButton(
       this.googleButton.nativeElement,
       { theme: 'filled_blue', size: 'large', width: '215' }
     );
   }
   

3. 验证client_id与授权配置

   • 确认client_id未过期、未被修改；
   • 检查谷歌开发者控制台中，当前项目的域名是否已添加到「已授权的 JavaScript 来源」列表中。

4. 调整按钮配置参数
   尝试移除width参数，或者设置合理的数值（比如字符串格式"215px"），避免因参数格式错误导致渲染失败：

   { theme: 'filled_blue', size: 'large', width: '215px' }
   

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