Not able to use asl-google-signin-button directive in a child module. Can only use it in the AppModule

[mayurchoksi]

I have multiple modules (hierarchy) within the application. AppModule (as part of Route[]) imports AuthModule.

export const appRoutes: Route[] = [ { path: '', children: [ { path: 'auth', component: LayoutComponent, data: { layout: 'empty' }, loadChildren: () => import('./modules/auth/auth.module').then((m) => m.AuthModule) } ] } ]

AuthModule contains LoginModule.

@NgModule({ imports: [ LoginModule ] }) export class AuthModule {}

I am not able to use asl-google-signin-button directing in LoginModules html/template file. Get the following Error (compile time):

Error: src/app/modules/auth/login/login.component.html:121:11 - 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.

I can get rid of the compile time error by adding 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' to LoginModule but then as expected get a runtime error.

[zahasoftware]

Same problem for me, in Child and Parent Module

[mfrizqi]

@mayurchoksi can you provide module file for authModule? looks like for me its works well

[mayurchoksi]

Hi,

Following are the contents of the AuthModule

import { NgModule } from @.***/core'; import { LoginModule } from './login/login.module'; import { RegisterModule } from './register/register.module'; import { AuthForgotPasswordModule } from './forgot-password/forgot-password.module'; import { AuthResetPasswordModule } from './reset-password/reset-password.module'; import { LockModule } from './lock/lock.module'; import { MailConfirmModule } from './mail-confirm/mail-confirm.module'; import { AuthSignUpModule } from './sign-up/sign-up.module'; import { AuthConfirmationRequiredModule } from './confirmation-required/confirmation-required.module';

@NgModule({ imports: [ // Authentication LoginModule, // RegisterModule, AuthSignUpModule, AuthForgotPasswordModule, AuthResetPasswordModule, LockModule, MailConfirmModule, AuthConfirmationRequiredModule ] }) export class AuthModule {

}

On Thu, Aug 11, 2022 at 4:41 PM mfrizqi @.***> wrote:

@mayurchoksi https://github.com/mayurchoksi can you provide module file for authModule? looks like for me its works well

— Reply to this email directly, view it on GitHub https://github.com/abacritt/angularx-social-login/issues/563#issuecomment-1211605741, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOFYSB53CK6DLO6FBXLA53VYSOBLANCNFSM553B2WLQ . You are receiving this because you were mentioned.Message ID: @.***>

-- Mayur Choksi

[born2net]

any updates on this? still not working for us either.

[NicolasRoehm]

I finally found the solution : You must import the SocialLoginModule module as close as possible to the component that wants to use the <asl-google-signin-button></asl-google-signin-button> button.

pages/auth/auth.module.ts

import { SocialLoginModule } from '@abacritt/angularx-social-login';
@NgModule({ imports: [ SocialLoginModule ] }) export class AuthModule {}

pages/auth/google/google.component.ts

<asl-google-signin-button></asl-google-signin-button> <!-- Now we can use the GoogleSigninButtonDirective -->

[born2net]

for me this solved it:

declare var google;

@Directive({
    // eslint-disable-next-line @angular-eslint/directive-selector
    selector: 'google-signin-butt'
})
export class GoogleSigninButtDirective implements OnInit {

    @Input('selectable') option: boolean;

    constructor(private el: ElementRef, private socialAuthService: SocialAuthService) {
    }

    ngOnInit() {
        if (!this.option) return;
        this.socialAuthService.initState.pipe(take(1)).subscribe(() => {
            google.accounts.id.renderButton(this.el.nativeElement, {
                type: 'standard',
                size: 'medium',
                text: 'signin_with',
                theme: 'filled_blue'
            });
        });
    }
}

and activated via:

<google-signin-butt [selectable]="showGoogleLogin"></google-signin-butt>

this.showGoogleLogin = false;

when user enters the login module

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CmarkoLukas]

This is still a case, NicolasRoehm's solution helps with the error but then it generates runtime error : Error: SocialLoginModule is already loaded. Import it in the AppModule only. Going to try creating my own directive as born2net suggested :)

[mate-szucs]

The same here, my solution:

If You are using this only in one child module, then this should work in the child module:

    providers: [
        {
            provide: SocialLoginModule,
            useValue: new SocialLoginModule(null),
        },
    ],

Otherwise the useFactory with static variable is the way to go: (just a schema)

    providers: [
            provide: SocialLoginModule,
            useFactory: ()=>{
                if(!YourAthService.staticSocialLogin) {
                    YourAthService.staticSocialLogin = new SocialLoginModule(null);
                }
                return YourAthService.staticSocialLogin;
            }
  ]

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fsevilla]

You can fix this by importing GoogleSigninButtonModule in your app module (or the module where you are trying to use the button at).

[AnkitMauni]

You can fix this bug by running the following command if you have imported all the mentioned modules:- npm i @abacritt/angularx-social-login@1.2.3 --save OR

npm i @abacritt/angularx-social-login@1.2.3 --legacy-peer-deps

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