Cannot read properties of undefined (reading 'signIn') @abacritt/angularx-social-login

Question

at the time of updating my ionic to v6 the version of angular was modified to 13 and when using the angularx-social-login library I saw on the npm page that it has become obsolete and uses the new @abacritt library /angularx-social-login, on facebook it works correctly but on google it shows me the error.

Error:

core.mjs:6494 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'signIn')
TypeError: Cannot read properties of undefined (reading 'signIn')
    at abacritt-angularx-social-login.mjs:93:30
    at new ZoneAwarePromise (zone.js:1349:1)
    at GoogleLoginProvider.signIn (abacritt-angularx-social-login.mjs:90:16)
    at abacritt-angularx-social-login.mjs:275:26
    at new ZoneAwarePromise (zone.js:1349:1)
    at SocialAuthService.signIn (abacritt-angularx-social-login.mjs:267:16)
    at LoginPage.signInWithGoogle (login.page.ts:156:26)
    at LoginPage_Template_button_click_45_listener (template.html:84:67)
    at executeListenerWithErrorHandling (core.mjs:15031:1)
    at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15069:1)
    at resolvePromise (zone.js:1262:1)
    at zone.js:1169:1
    at abacritt-angularx-social-login.mjs:283:25
    at push.23484._ZoneDelegate.invoke (zone.js:409:1)
    at Object.onInvoke (core.mjs:25608:1)
    at push.23484._ZoneDelegate.invoke (zone.js:408:1)
    at push.23484.Zone.run (zone.js:169:1)
    at zone.js:1326:1
    at push.23484._ZoneDelegate.invokeTask (zone.js:443:1)
    at Object.onInvokeTask (core.mjs:25595:1)
    

Imports in app.module.js

import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import {
  GoogleLoginProvider,
  FacebookLoginProvider
} from '@abacritt/angularx-social-login';

Providers:

imports: [
    BrowserModule,
    IonicModule.forRoot(),AppRoutingModule,
    PipesModule,
    AppRoutingModule,
    HttpClientModule,
    ComponentsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    SocialLoginModule,

  ],
  
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: true,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'GOOGLE-ID'
            ),
          },
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider('FACEBOOK-ID'),
          }
        ],
      } as SocialAuthServiceConfig,
    },
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    NgxImageCompressService
  ],

Button in HTML:

<ion-button shape="round"
                          expand="block"
                          class="ion-padding"
                          (click)="signInWithGoogle()">
                <ion-icon name="logo-google" slot="start"></ion-icon>
                Google
              </ion-button>

TS:

import { SocialAuthService, SocialUser } from "@abacritt/angularx-social-login";
import { FacebookLoginProvider, GoogleLoginProvider } from "@abacritt/angularx-social-login";


user: SocialUser;
GoogleLoginProvider = GoogleLoginProvider;
  

 constructor( public authService: SocialAuthService){}
 
 
 // function call auth Service with Google provider
 
 signInWithGoogle(): void {
        this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
    }

Answer 1

if you check the documentation, you now need to now use a custom buttom

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

As now the google provider does not have a signIn method. https://github.com/abacritt/angularx-social-login#readme