Angular 12兼容@abacritt/angularx-social-login安装及相关问题解决

1. 安装适配Angular v12的指定版本 #

Angular v12仅兼容@abacritt/angularx-social-login的3.x.x系列版本，更高版本（4.x及以上）依赖Angular 13+，会引发依赖冲突。直接执行以下命令安装稳定兼容版：

npm install @abacritt/angularx-social-login@3.2.0

若之前安装过高版本，先卸载清理：

npm uninstall @abacritt/angularx-social-login

2. 修复asl-google-signin-button组件找不到的问题 #

• 确保使用组件的模块中正确导入依赖并配置：

  import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
  import { GoogleLoginProvider } from '@abacritt/angularx-social-login/providers';
  
  @NgModule({
    imports: [SocialLoginModule],
    providers: [
      {
        provide: 'SocialAuthServiceConfig',
        useValue: {
          autoLogin: false,
          providers: [
            {
              id: GoogleLoginProvider.PROVIDER_ID,
              provider: new GoogleLoginProvider('你的谷歌OAuth客户端ID')
            }
          ]
        } as SocialAuthServiceConfig
      }
    ]
  })
  export class YourFeatureModule { }
  

• 组件标签需严格使用官方定义的小写短横线格式：

  <asl-google-signin-button></asl-google-signin-button>
  

3. 验证安装结果 #

检查package.json中的依赖项，确认版本为3.x.x：

"@abacritt/angularx-social-login": "^3.2.0"

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