Angular 4中ng2-account-kit SDK初始化报错求助

这个问题我之前也碰到过，核心原因其实很简单：你在index.html里引入的AccountKit SDK是异步加载的，但Angular组件的ngOnInit钩子会在SDK加载完成之前就执行，这时候调用AccountKit.init()自然会报错。刷新页面后SDK已经被浏览器缓存，加载速度变快，所以能正常运行。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案一：动态加载SDK并等待加载完成 #

直接在组件里动态创建script标签加载SDK，确保加载完成后再执行初始化逻辑，这样能完全避免时机问题：

// 先声明AccountKit变量，避免TypeScript报错
declare var AccountKit: any;

@Component({
  // 组件元数据
})
export class LoginComponent implements OnInit {
  ngOnInit() {
    this.loadAccountKitSDK().then(() => {
      AccountKit.init({ 
        appId: '{{FACEBOOK_APP_ID}}', 
        state: '{{csrf}}', 
        version: '{{ACCOUNT_KIT_API_VERSION}}' 
      });
      // 这里可以继续写登录相关的逻辑
    });
  }

  private loadAccountKitSDK(): Promise<void> {
    return new Promise((resolve) => {
      const script = document.createElement('script');
      script.src = 'https://sdk.accountkit.com/en_US/sdk.js';
      script.onload = () => resolve();
      // 可选：添加错误处理
      script.onerror = () => {
        console.error('AccountKit SDK加载失败');
        resolve();
      };
      document.body.appendChild(script);
    });
  }
}

方案二：监听SDK加载完成的全局标记 #

修改index.html里的script标签，添加onload回调标记SDK就绪，然后在组件里等待这个标记出现后再初始化：

首先修改index.html：

<script src="https://sdk.accountkit.com/en_US/sdk.js" onload="window.accountKitReady = true;"></script>

然后在组件里：

declare var AccountKit: any;

@Component({
  // 组件元数据
})
export class LoginComponent implements OnInit, OnDestroy {
  private sdkCheckInterval: any;

  ngOnInit() {
    this.sdkCheckInterval = setInterval(() => {
      if (window['accountKitReady']) {
        clearInterval(this.sdkCheckInterval);
        AccountKit.init({ 
          appId: '{{FACEBOOK_APP_ID}}', 
          state: '{{csrf}}', 
          version: '{{ACCOUNT_KIT_API_VERSION}}' 
        });
      }
    }, 100); // 每100ms检查一次
  }

  ngOnDestroy() {
    // 组件销毁时清理定时器，避免内存泄漏
    if (this.sdkCheckInterval) {
      clearInterval(this.sdkCheckInterval);
    }
  }
}

方案三：使用APP_INITIALIZER提前初始化 #

如果你想在整个应用启动前就完成SDK初始化，可以用Angular的APP_INITIALIZER提供商，这样能确保所有组件初始化前SDK已经就绪：

首先创建一个初始化服务：

import { Injectable } from '@angular/core';

declare var AccountKit: any;

@Injectable()
export class AccountKitInitializer {
  initialize(): Promise<void> {
    return new Promise((resolve) => {
      const script = document.createElement('script');
      script.src = 'https://sdk.accountkit.com/en_US/sdk.js';
      script.onload = () => {
        AccountKit.init({ 
          appId: '{{FACEBOOK_APP_ID}}', 
          state: '{{csrf}}', 
          version: '{{ACCOUNT_KIT_API_VERSION}}' 
        });
        resolve();
      };
      document.body.appendChild(script);
    });
  }
}

然后在app.module.ts里配置APP_INITIALIZER：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AccountKitInitializer } from './account-kit.initializer';

// 创建初始化工厂函数
export function accountKitInitFactory(initializer: AccountKitInitializer) {
  return () => initializer.initialize();
}

@NgModule({
  providers: [
    AccountKitInitializer,
    {
      provide: APP_INITIALIZER,
      useFactory: accountKitInitFactory,
      deps: [AccountKitInitializer],
      multi: true
    }
  ]
})
export class AppModule { }

这个方案适合需要在多个组件中使用AccountKit的场景，一次初始化全应用可用。

额外注意点 #

• 别忘了在组件里添加declare var AccountKit: any;，否则TypeScript会提示找不到AccountKit变量。
• 如果使用方案二，一定要在组件销毁时清理定时器，避免内存泄漏。

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