Angular5项目使用angular2-social-auth报错：socialSignIn不是函数

API 探路者

2026-5-15

问题排查与解决方案

嘿，我一眼就揪出了导致你报错的核心问题！你遇到的TypeError: _co.socialSignIn is not a function，本质是HTML模板里调用的方法名和组件类里定义的方法名不匹配。

直接原因：方法名不一致

你在组件类（component.ts）里定义的登录方法叫signIn，但在HTML模板里却写了socialSignIn('facebook')——组件里根本没这个方法，Angular找不到它，自然就抛出错误了。

第一步：修正HTML模板的方法名

把模板里的socialSignIn全部改成signIn，就能正确绑定到组件的方法上了：

<h1> Sign in </h1>
<button (click)="signIn('facebook')">Sign in with Facebook</button>
<button (click)="signIn('google')">Signin in with Google</button>

第二步：优化模块配置（可选但推荐）

另外，我注意到你在AppModule外部调用Angular2SocialLoginModule.loadProvidersScripts(providers)，这种写法在部分场景下可能出现加载顺序问题。更规范的做法是用模块的forRoot方法传入配置：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Angular2SocialLoginModule } from "angular2-social-auth";

let providers = {
  "facebook": {
    "clientId": "MyGeneratedCode",
    "apiVersion": "v2.11"
  }
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Angular2SocialLoginModule.forRoot(providers) // 改用forRoot传入配置
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// 移除这一行：Angular2SocialLoginModule.loadProvidersScripts(providers);