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

[obrador]

Hi, When I try to use asl-google-signin-button in my html template I get this error when building application:

error NG8001: '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.

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

I'm sure I miss something, but I set up my code just as README.

This is how my app.module.ts looks like:

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    SocialLoginModule
  ],
  providers: [

    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('******'),
          },
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig,
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And my component just like the README:

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  user: SocialUser;
  loggedIn: boolean;

  constructor(private authService: SocialAuthService) { }

  ngOnInit() {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
    });
  }

}

I'm sure I miss something, but I can't see documented in the README Thanks in advance

[BruneXX]

Same here, or there's lack of documentation or there's another issue..

[DavidVojnicHajduk]

SocialLoginModule also has to be added to the imports of the module that declares the component in whose .html file you want to use asl-google-signin-button.

[kkorniszuk]

But then you get an error that this module has been already loaded.

[BruneXX]

is there any solution to this? the directive issue is the only thing (for now) stopping me to implement the library...

[chrisval-byte]

Hey there!

I found the solution to this problem (according to the configuration I have inside my project).

According to the documentation, you have to add the following line but it doesn't say where: <asl-google-signin-button></asl-google-signin-button>

According to the documentation, you must import "SocialLoginModule" from the app.module, but this if you are working on this same component (which means you must import it in app.module if you are going to work on app.component.html file)

So you must bring it from the file.module where you will work your html.

Example:

My folder structure:

-app (folder) |--modules (folder) |----auth (folder) |------pages (folder) |--------register (folder) |----------register.component.ts |----------register.component.html |----auth.module.ts |--app.module.ts

As you can see, I have a different configuration adding an auth.module.ts in addition to the app.module that is already "default" in angular.

So as I will implement the google button in my register.component.ts and in my register.component.html, I must import "SocialLoginModule" inside auth.module.ts, which encapsulates those parts of my project.

Likewise remove it from app.module.ts. All the configuration you did in the app.module about "SocialAuthServiceConfig" like providers and other things, must go to the one that will encapsulate your component.

This way you should not have any more problems.

(I clarify again that this was my solution to the configuration that I have of my project)

If you have something similar, try importing this part of the library from the part that encapsulates the component you will be working with

I hope I can help you with your problem and you can continue doing what we love the most!

[obrador]

Thanks a lot! this worked for me.

[mehulpatel401]

As on the version @abacritt/angularx-social-login:2.2.0 Add import: import { SocialLoginModule, GoogleSigninButtonModule } from '@abacritt/angularx-social-login';

into the module where your login component is placed (Not always in AppModule, check based on your project stucture)