Angular CLI构建后TypeError报错：无法读取'signIn'属性的解决方法

嘿，这个问题我之前在Angular项目里也碰到过！开发阶段好好的，一打包上线就炸，核心原因基本是构建后的代码作用域、资源加载时机或者全局变量被优化掉导致的，结合你贴的代码片段，给你几个针对性的解决办法：

1. 把that换成箭头函数，守住上下文 #

你用let that = this来保留组件实例的写法，在生产构建时可能被打包工具（比如Webpack）的混淆优化搞乱指向。换成箭头函数就能直接锁住this的指向，不用再靠that中转：

declare const gapi: any;
export class AppComponent {
  auth2: any;

  public googleInit() {
    // 用箭头函数替代普通函数，直接绑定组件的this
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: '你的CLIENT_ID',
        cookiepolicy: 'single_host_origin',
        // 其他配置项补全
      });
      // 一定要等auth2初始化完再绑定登录按钮
      this.bindLoginButton();
    });
  }

  private bindLoginButton() {
    const loginBtn = document.getElementById('google-login-btn');
    if (loginBtn && this.auth2) {
      this.auth2.attachClickHandler(loginBtn, {}, 
        (user: any) => {
          console.log('登录成功', user.getBasicProfile());
        }, (err: any) => {
          console.error('登录失败', err);
        }
      );
    }
  }

  ngOnInit() {
    this.googleInit();
  }
}

2. 确保gapi脚本在组件初始化前加载完成 #

开发环境本地加载快，gapi大概率在组件初始化前就加载好了，但生产环境的资源加载顺序可能变。你可以在index.html里把gapi脚本改成带回调的异步加载，确保脚本加载完再初始化Google登录：

<!-- 在index.html的<head>里添加 -->
<script src="https://apis.google.com/js/api:client.js?onload=gapiLoaded" async defer></script>

然后在组件里监听这个全局回调：

declare const gapi: any;

export class AppComponent {
  auth2: any;

  ngOnInit() {
    // 先检查gapi是否已加载，没加载就绑定全局回调
    if (typeof gapi !== 'undefined') {
      this.googleInit();
    } else {
      (window as any).gapiLoaded = () => this.googleInit();
    }
  }

  // 下面的googleInit和bindLoginButton和上面一样
}

3. 阻止打包工具把gapi优化没 #

有些打包工具的生产模式会把未声明的全局变量（比如gapi）当作无用变量删掉，导致运行时找不到它。如果是Angular项目，你需要：

• 在tsconfig.json的types数组里添加gapi
• 或者在angular.json的build -> options -> scripts里明确引入gapi脚本：

"scripts": [
  "https://apis.google.com/js/api:client.js"
]

其他框架（比如Vue/React）也类似，要在打包配置里把gapi标记为全局变量，避免被优化。

4. 加个初始化校验，避免空指针 #

最后可以在初始化auth2后加个判断，确保它真的被赋值了，防止后续调用signIn或attachClickHandler时出错：

gapi.load('auth2', () => {
  this.auth2 = gapi.auth2.init({
    client_id: '你的CLIENT_ID',
    cookiepolicy: 'single_host_origin'
  });

  if (!this.auth2) {
    console.error('Google Auth2初始化失败，请检查client_id和网络');
    return;
  }

  this.bindLoginButton();
});

按这几步来应该就能解决问题了，要是还不行，可以去浏览器控制台看看构建后的代码里gapi是否存在，或者auth2的赋值逻辑有没有被修改~

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