You should not call this method directly for Google, use "<asl-google-signin-button>"

[DylanPrimera]

How i can import these in my project?

[nwalkewicz]

I'm not sure why, but the documentation for this project doesn't match what the code says (as of 4bd9414). In order to create a Google Sign-in button, you have to use the directive <asl-google-signin-button> rather than calling the authService.signIn() method. As far as I know, every other method still works fine.

To see what the example uses, look at the template and removal of signInWithGoogle() method.

Edit:

It seems the GitHub documentation is updated with the newer way to use the Google Sign-in button, but the NPM docs aren't. See Sign in with google for details on how to implement it.

[nwalkewicz]

Might be a dumb question, but are you running the latest version of the package? Currently 1.2.4

[brandondunc94]

I guess that's what happens when you look too long at something. I was running version 4 which in my head I assumed was the latest. Thanks for pointing me in the right direction!

[nwalkewicz]

Yeah, of course; glad that helped!

[DylanPrimera]

When I import the 'GoogleSigninButtonDirective' in my module declarations I'm gettin the following error: Cannot declare 'GoogleSigninButtonDirective' in an NgModule as it's not a part of the current compilation.
help, pls

[brandondunc94]

I believe it is a standalone directive so you don't need to import it into your module. I did not import it and it worked for me just inserting into my template like this:

My module only contains the Providers and their respective settings

[DylanPrimera]

Thanks for the help, guys!

[wvvinicius]

I tried these ways, and it doesn't work. Can someone help me?
I get this error:

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()"

 <div GoogleSigninButtonDirective>
          <div
            id="g_id_onload"
            data-client_id="858928889682-tb04v2bl9bkpogd2n028behmp2rpgt45.apps.googleusercontent.com"
            data-auto_prompt="false"
          ></div>
          <div
            class="g_id_signin"
            data-type="standard"
            data-size="large"
            data-theme="outline"
            data-text="sign_in_with"
            data-shape="rectangular"
            data-logo_alignment="left"
          ></div>

<div GoogleSigninButtonDirective>
          <a class="btn-google" (click)="signInWithGoogle()"
          ><i class="fa-brands fa-google"></i
        ></a>
        </div>

[nwalkewicz]

Hey there, check out my answer above. Sign in with google tells us the updated way of implementing the Google Sign-in button. Instead of using <div GoogleSigninButtonDirective>...</div>, use the <asl-google-signin-button></asl-google-signin-button> element. There isn't as much customization since it's really just an iframe (which we have no control over the contents of), but as far as I know it's the only way available now.