Google button preventing component from working

[Mohamed-Sellahi]

I'm trying to add google login into my material angular application. The component that should host the login button is part of an angular module that is lazy loaded.

Here is my setup:

In AppModule

const GOOGLE_AUTH_SCOPES: string[] = [
  'openid',
  'https://www.googleapis.com/auth/userinfo.profile',
  'https://www.googleapis.com/auth/userinfo.email',
  'https://www.googleapis.com/auth/photoslibrary.readonly'
];

const googleAuthProvider: Provider = {
  provide: 'SocialAuthServiceConfig',
  useValue: {
    autoLogin: true,
    providers: [
      // Google
      {
        id: GoogleLoginProvider.PROVIDER_ID,
        provider: new GoogleLoginProvider(
          'MY-APP-ID-HERE',
          {
            scopes: GOOGLE_AUTH_SCOPES,
            oneTapEnabled: false
          }
        )
      }
      // Facebook
    ],
    onError: (err) => {
      console.log(err);
    }
  } as SocialAuthServiceConfig
};

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    CoreModule,
    SharedModule.forRoot(),

    SocialLoginModule, // <--------- 

    BrowserModule,
    AppRoutingModule, // <-------- Where the AccountModule is lazy loaded
    BrowserAnimationsModule,

    MatSidenavModule,
    MatToolbarModule,

  ],
  providers: [
    { provide: ErrorHandler, useClass: AppErrorHandler },
    googleAuthProvider
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the AccountModule, I reimport

@NgModule({
  declarations: [
    AccountComponent,
    LoginComponent,           // <----------- Where the button should show
    ConfirmEmailComponent,
    ResetPasswordComponent
  ],
  providers: [ ],
  imports: [
    AccountRoutingModule, 

    // Angular modules
    CommonModule,
    FormsModule,
    ReactiveFormsModule,

    SharedModule,
    SocialLoginModule, <------- Reimport here to be able to use the google button in my components

    // Material angular modules
   // ......
  ]
})
export class AccountModule { }

In my component template I have a mat-list where the social buttons should show. Only google login is configured for now

<mat-list>
 <mat-list-item><button type="button"
       mat-raised-button>
  <mat-icon svgIcon="facebook-logo"></mat-icon>Facebook
    </button></mat-list-item>
  <mat-list-item><button type="button"
      mat-raised-button>
  <mat-icon svgIcon="instagram-logo"></mat-icon>Instagram
    </button></mat-list-item>
  <mat-list-item>
    <asl-google-signin-button type='standard' size='medium'></asl-google-signin-button>
  </mat-list-item>
</mat-list>

In the dev tools, I can see that a new script tag is being added to my application
<script async="" src="https://accounts.google.com/gsi/client"></script>

Problem :
Importing the SocialLoginModule into AccountModule prevents LoginComponent to show, and seems to route me back to /.

Thank you for your help

[jayna456]

@Mohamed-Sellahi, did you find any solution? How did you manage to fetch the user details whoever try to login?