'asl-google-signin-button' is not a known element:

[TanerSaydam]

Hi,

I did it everything right. But I get this error!

'asl-google-signin-button' is not a known element:

AppModule.ts

import { SocialLoginModule } from '@abacritt/angularx-social-login';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SocialLoginModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>

What can I do fix this error?

[mckral68]

Modulünüze GoogleSigninButtonModule import edin sorun çözülecektir

[TanerSaydam]

Edit: Buldu tamamdır. Ellerine sağlık

[AshminJayson]

Could you share the code after your import? I'm still getting the same error.

[TanerSaydam]

Could you share the code after your import? I'm still getting the same error.

GoogleSigninButtonModule,
import {  GoogleSigninButtonModule } from '@abacritt/angularx-social-login';

[vahapmete]

angular kacinci versyiyonu icin bu cozum
ben 15 kullaniyorum ve modulu hic bulamiyor bile

[vahapmete]

nasil buldunuz

[AliAdravi]

English version of Turkish:
Import GoogleSigninButtonModule to your module and the problem will be solved

[tinhnghiadn3]

I didnt found the GoogleSigninButtonModule to import it, please help me

[tinhnghiadn3]

Oh I found the solution at https://github.com/abacritt/angularx-social-login/issues/563#issue-1331121660

[comboi]

I imported this on the module.app.ts

import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BlankLayoutComponent } from './shared/layouts/blank/blank-layout.component';
import { ManagerLayoutComponent } from './shared/layouts/manager/manager-layout.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';
import { MaterialModule } from './shared/material.module';
import { LayoutModule } from '@angular/cdk/layout';
import { APP_BASE_HREF } from '@angular/common';
import { environment } from 'src/environments/environment';
import {
  SocialLoginModule,
  SocialAuthServiceConfig,
  GoogleLoginProvider,
  GoogleSigninButtonDirective,
  GoogleSigninButtonModule,
} from '@abacritt/angularx-social-login';
import { AuthService } from './core/services/authorisation/authorisation.service';

const googleClientId = environment.googleClientId;

@NgModule({
  providers: [
    AuthService,
    {
      provide: APP_BASE_HREF,
      useValue: environment.baseHref,
    },
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(googleClientId),
          },
        ],
      } as SocialAuthServiceConfig,
    },
    GoogleSigninButtonDirective,
  ],
  declarations: [AppComponent, BlankLayoutComponent, ManagerLayoutComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    HttpClientModule,
    MaterialModule,
    LayoutModule,
    SocialLoginModule,
    GoogleSigninButtonModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}

And I still getting this error:
`asl-google-signin-button' is not a known element:

1. If 'asl-google-signin-button' is an Angular component, then verify that it is part of this module.
2. If 'asl-google-signin-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)`

When I use the button:

<div class="main">
    LOGIN
    <button (click)="signOut()">Logout</button>
    <asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>
</div>

I'm using:

  "@abacritt/angularx-social-login": "2.0.0",
    "@angular/animations": "^15.2.9",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/core": "^15.2.9",

[vfonsah]

I am currently facing this same issue as well.
Just like @comboi , I had imported the GoogleSigninButtonModule into my app module, but I received the same error message when I moved into the LoginComponent component which is from where I have placed the directive.

• attempted to import the GoogleSigninButtonModule modue in the component's module, LoginModule, but didn't resolve the issue.

• added the CUSTOM_ELEMENTS_SCHEMA to the @NgModule.schemas of the app module, no resolve

• further went on to add both, as he did above, but it seems not to pick the import. Ironically, the template directive doesn't throw an error at compile time, nor does it indicate any errors in the template

• Also, I added the GoogleSigninButtonDirective to the NgModule.providers of my app module, no resolve.

• When I try to call the socialAuthService.signIn(...) method directly by a click event on an html button element, I receive an error, asking me to use the wrapper for asl-google-signin-button or generate the button myself

core.mjs:8400 ERROR Error: Uncaught (in promise): You should not call this method directly for Google, use "" wrapper or generate the button yourself with "google.accounts.id.renderButton()" (https://developers.google.com/identity/gsi/web/guides/display-button#javascript)
at resolvePromise (zone.js:1211:31)
at resolvePromise (zone.js:1165:17)
at zone.js:1278:17
at _ZoneDelegate.invokeTask (zone.js:406:31)
at core.mjs:23896:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23896:36)
at _ZoneDelegate.invokeTask (zone.js:405:60)
at Object.onInvokeTask (core.mjs:24197:33)
at _ZoneDelegate.invokeTask (zone.js:405:60)
at Zone.runTask (zone.js:178:47)

Now for this point, I am not sure where or how to invoke the 'google.accounts.id.renderButton()' method to generate the button and use in my component.

I will really be grateful for a solution to this or a proposal to an altenative library to use for sign in with google.

• I am coming from using angular-social-login angular package which until it was rendered deprecated, had been working just fine on my app. I recently uninstalled it and installed @abacritt/angularx-social-login and had to upgrade my angular CLI from v13 to v15

[AnkitMauni]

You can fix this bug by running the following command if you have imported all the mentioned modules:-
npm i @abacritt/[email protected] --save OR

npm i @abacritt/[email protected] --legacy-peer-deps

& it runs in both Angular 15 and 16
Also, it is GoogleSigninButtonDirective and not module which will be declared in Providers.

[AnkitMauni]

I have solved this issue

…

On Mon, Jul 31, 2023 at 9:57 PM wbaldanw ***@***.***> wrote: I'm facing the same issue here. Angular 16. — Reply to this email directly, view it on GitHub <#683 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAB76VIX3HTFJQOGQS2TRYTXS7MGNANCNFSM6AAAAAAVXUPPBE> . You are receiving this because you commented.Message ID: <abacritt/angularx-social-login/repo-discussions/683/comments/6597153@ github.com>

[RaymondProduction]

How?

[3Mowafy]

in app.module.ts
imports: [...],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent],

or in @component dcorator

schemas: [CUSTOM_ELEMENTS_SCHEMA]

[dhruvlathia]

i am using

"@abacritt/angularx-social-login": "^2.0.0",

and my app module is like this

import { GoogleLoginProvider, GoogleSigninButtonModule, SocialAuthServiceConfig, SocialLoginModule, GoogleSigninButtonDirective } from "@abacritt/angularx-social-login";
//...other imports
@NgModule({
  declarations: [AppComponent],
  imports: [
    SocialLoginModule,
    GoogleSigninButtonModule,
    //..other imports as well
  ],
  providers: [
    {
      provide: "SocialAuthServiceConfig",
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              "85190....<my_client_id_i_cannot_show>....sd00.apps.googleusercontent.com"
            ),
          },
        ],
        onError: (err: unknown) => {
          console.error(err);
        },
      } as SocialAuthServiceConfig,
    },
    GoogleSigninButtonDirective
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

and my html page is like this
<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>

i am getting popup of continue with google which is working well, but i can not see the button

This is the popup.. and working well,

Button no button?

[dhruvlathia]

I think my error is solved, i did one mistake, i also had one separate module for child component auth and i was required to put GoogleSigninButtonModule into that module instead of parent app module

[yahyaerdoan]

I got this error before, i imported GoogleSigninButtonModule into my module, later on error has been fixed.