Maransatto
commented
11 months ago I just noticed that GoogleLoginProvider.PROVIDER_ID is null
Open Maransatto opened 11 months ago
Maransatto
commented
11 months ago I just noticed that GoogleLoginProvider.PROVIDER_ID is null
Maransatto
commented
11 months ago Here is main.ts, I'm not using modules.
import {enableProdMode, importProvidersFrom} from '@angular/core';
import {
GoogleLoginProvider,
SocialAuthServiceConfig,
SocialLoginModule,
} from '@abacritt/angularx-social-login';
import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatSortModule} from '@angular/material/sort';
import {BrowserModule, bootstrapApplication} from '@angular/platform-browser';
import {
provideAnimations,
provideNoopAnimations,
} from '@angular/platform-browser/animations';
import {provideRouter} from '@angular/router';
import {
ServiceWorkerModule,
SwRegistrationOptions,
} from '@angular/service-worker';
import {ROUTES} from '@dt/app.routes';
import * as ChangelogEffects from '@dt/core/components/changelog/store/changelog.effects';
import {changelogReducer} from '@dt/core/components/changelog/store/changelog.reducer';
import {ExternalAppsService} from '@dt/core/components/external-apps/external-apps.service';
import * as ExternalAppsEffects from '@dt/core/components/external-apps/store/external-apps.effects';
import {externalAppsReducer} from '@dt/core/components/external-apps/store/external-apps.reducer';
import * as DocumentsRoutingEffects from '@dt/modules/documents/store/documents-routing.effects';
import * as DocumentsEffects from '@dt/modules/documents/store/documents.effects';
import {documentsReducer} from '@dt/modules/documents/store/documents.reducer';
import {LockboxService} from '@dt/modules/lockbox/lockbox.service';
import * as LockboxRoutingEffects from '@dt/modules/lockbox/store/lockbox-routing.effects';
import * as LockboxEffects from '@dt/modules/lockbox/store/lockbox.effects';
import {lockboxReducer} from '@dt/modules/lockbox/store/lockbox.reducer';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {provideEffects} from '@ngrx/effects';
import {StoreRouterConnectingModule} from '@ngrx/router-store';
import {provideStore} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {InfiniteScrollModule} from 'ngx-infinite-scroll';
import {MarkdownModule} from 'ngx-markdown';
import {ToastrModule} from 'ngx-toastr';
import {AppComponent} from './app/app.component';
import {ChangelogService} from './app/core/components/changelog/changelog.service';
import {modalReducer} from './app/core/components/modal/store/modal.reducer';
import * as NotificationEffects from './app/core/components/notifications/store/notifications.effects';
import {notificationsReducer} from './app/core/components/notifications/store/notifications.reducer';
import {EmailService} from './app/core/services/email.service';
import {FileService} from './app/core/services/file.service';
import * as RouterEffects from './app/core/store/core.effects';
import {metaReducers, reducers} from './app/core/store/core.reducer';
import * as CredentialsRoutingEffects from './app/credentials/store/credentials-routing.effects';
import * as CredentialsEffects from './app/credentials/store/credentials.effects';
import {credentialsReducer} from './app/credentials/store/credentials.reducer';
import {httpInterceptorProviders} from './app/http';
import {CateringService} from './app/modules/catering/catering.service';
import * as CateringEffects from './app/modules/catering/store/catering.effects';
import {cateringReducer} from './app/modules/catering/store/catering.reducer';
import * as DashboardEffects from './app/modules/dashboard/store/dashboard.effects';
import {MemoService} from './app/modules/memo/memo.service';
import * as MemoPageEffects from './app/modules/memo/store/memo.effects';
import {memoReducer} from './app/modules/memo/store/memo.reducer';
import {ReviewsService} from './app/modules/reviews/reviews.service';
import * as ReviewsRoutingEffects from './app/modules/reviews/store/reviews-routing.effects';
import * as ReviewsEffects from './app/modules/reviews/store/reviews.effects';
import {reviewsReducer} from './app/modules/reviews/store/reviews.reducer';
import {DTTicketsService} from './app/modules/tickets/dt-tickets.service';
import * as DtTicketsEffects from './app/modules/tickets/store/dt-tickets.effects';
import * as ServiceTypeEffects from './app/modules/tickets/store/service-type.effects';
import * as TicketTypeEffects from './app/modules/tickets/store/ticket-type.effects';
import * as TicketsRoutingEffects from './app/modules/tickets/store/tickets-routing.effects';
import * as TicketsEffects from './app/modules/tickets/store/tickets.effects';
import {ticketsReducer} from './app/modules/tickets/store/tickets.reducer';
import * as ZendeskTicketsEffects from './app/modules/tickets/store/zendesk-tickets.effects';
import {ZendeskTicketsService} from './app/modules/tickets/zendesk-tickets.service';
import {environment} from './environments/environment';
if (environment.production) {
enableProdMode();
}
bootstrapApplication(AppComponent, {
providers: [
provideRouter(ROUTES),
provideStore(
{
catering: cateringReducer,
changelog: changelogReducer,
credentials: credentialsReducer,
documents: documentsReducer,
externalApps: externalAppsReducer,
lockbox: lockboxReducer,
memos: memoReducer,
modal: modalReducer,
notifications: notificationsReducer,
review: reviewsReducer,
ticket: ticketsReducer,
...reducers,
},
{
metaReducers,
runtimeChecks: {
strictStateImmutability: true,
strictActionImmutability: true,
},
},
),
provideEffects([
CateringEffects,
ChangelogEffects,
CredentialsEffects,
CredentialsRoutingEffects,
DashboardEffects,
DocumentsEffects,
DocumentsRoutingEffects,
DtTicketsEffects,
ExternalAppsEffects,
LockboxEffects,
LockboxRoutingEffects,
MemoPageEffects,
NotificationEffects,
ReviewsEffects,
ReviewsRoutingEffects,
RouterEffects,
ServiceTypeEffects,
TicketsEffects,
TicketsRoutingEffects,
TicketTypeEffects,
ZendeskTicketsEffects,
]),
importProvidersFrom(
BrowserModule,
FontAwesomeModule,
InfiniteScrollModule,
MarkdownModule.forRoot(),
MatButtonToggleModule,
MatSortModule,
NgbModule,
ServiceWorkerModule.register('ngsw-worker.js'),
SocialLoginModule,
StoreDevtoolsModule.instrument({
maxAge: 50,
logOnly: environment.production,
}),
StoreRouterConnectingModule.forRoot(),
ToastrModule.forRoot(),
),
{
provide: SwRegistrationOptions,
useFactory: () => ({
enabled: environment.production,
// Register the ServiceWorker as soon as the application is stable
// or after 30 seconds (whichever comes first).
registrationStrategy: 'registerWhenStable:30000',
}),
},
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
environment.googleClientID,
{
oneTapEnabled: false,
},
),
},
],
onError: (err) => {
console.error(err);
},
} as SocialAuthServiceConfig,
},
httpInterceptorProviders,
MemoService,
EmailService,
CateringService,
ZendeskTicketsService,
DTTicketsService,
FileService,
ReviewsService,
ChangelogService,
LockboxService,
ExternalAppsService,
provideHttpClient(withInterceptorsFromDi()),
provideNoopAnimations(),
provideAnimations(),
],
}).catch((err) => console.error(err));
Here is some more information:
src_app_modules_login_login_component_ts.js:2 ERROR Error: Uncaught (in promise): Error
Error
at _.$e (client:128:335)
at new qp (client:227:3)
at $p (client:246:34)
at Mo (client:244:246)
at Object.No [as renderButton] (client:216:62)
at abacritt-angularx-social-login.mjs:993:40
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:26321:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at resolvePromise (zone.js:1193:31)
at zone.js:1264:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:25998:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25998:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:26308:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:173:47)
at drainMicroTaskQueue (zone.js:581:35)
I found the issue.
I changed from
<asl-google-signin-button
type="standard"
logo_alignment="center"
width="200"
/>to
<asl-google-signin-button
type="standard"
logo_alignment="center"
[width]="200"
/>That's weird because the width defined in GoogleSigninButtonDirective is string
import { ElementRef } from '@angular/core';
import { SocialAuthService } from '../socialauth.service';
import * as i0 from "@angular/core";
export declare class GoogleSigninButtonDirective {
type: 'icon' | 'standard';
size: 'small' | 'medium' | 'large';
text: 'signin_with' | 'signup_with' | 'continue_with';
shape: 'square' | 'circle' | 'pill' | 'rectangular';
theme: 'outline' | 'filled_blue' | 'filled_black';
logo_alignment: 'left' | 'center';
width: string;
locale: string;
constructor(el: ElementRef, socialAuthService: SocialAuthService);
static ɵfac: i0.ɵɵFactoryDeclaration<GoogleSigninButtonDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GoogleSigninButtonDirective, "asl-google-signin-button", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "text": { "alias": "text"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "logo_alignment": { "alias": "logo_alignment"; "required": false; }; "width": { "alias": "width"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; }, {}, never, never, false, never>;
}
stale[bot]
commented
8 months ago 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.
The Google login button suddenly disappeared, and I got an error while trying to subscribe to SocialAuthService. Did someone has ever faced this issue?
stack trace
package.json