Angular V17-SSR-ERROR Error: NullInjectorError: No provider for SocialAuthServiceConfig

Question

I recently Upgraded to Angular to V17 with SSR and when i tried to load page this error is coming. ERROR Error: NullInjectorError: No provider for SocialAuthServiceConfig!

Note: - I am using Only standalone components (No modules)

Need help to resolve this issue

ERROR Error: NullInjectorError: No provider for SocialAuthServiceConfig!
    at t (angular/node_modules/zone.js/fesm2015/zone-error.js:85:33)
    at NullInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:5626:27)
    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)
    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)
    at injectInjectorOnly (angular/node_modules/@angular/core/fesm2022/core.mjs:911:40)
    at Module.ɵɵinject (angular/node_modules/@angular/core/fesm2022/core.mjs:917:42)
    at initialState (angular/node_modules/@abacritt/angularx-social-login/fesm2022/abacritt-angularx-social-login.mjs:374:46)
    at eval (angular/node_modules/@angular/core/fesm2022/core.mjs:6189:43)
    at runInInjectorProfilerContext (angular/node_modules/@angular/core/fesm2022/core.mjs:867:9)
    at R3Injector.hydrate (angular/node_modules/@angular/core/fesm2022/core.mjs:6188:17)
    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6058:33)
    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)
    at ChainedInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:15378:36)
    at lookupTokenUsingModuleInjector (angular/node_modules/@angular/core/fesm2022/core.mjs:4137:39)
    at getOrCreateInjectable (angular/node_modules/@angular/core/fesm2022/core.mjs:4185:12) {
  originalStack: 'Error: NullInjectorError: No provider for SocialAuthServiceConfig!\n' +
    '    at t (angular/node_modules/zone.js/fesm2015/zone-error.js:85:33)\n' +
    '    at NullInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:5626:27)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at injectInjectorOnly (angular/node_modules/@angular/core/fesm2022/core.mjs:911:40)\n' +
    '    at Module.ɵɵinject (angular/node_modules/@angular/core/fesm2022/core.mjs:917:42)\n' +
    '    at initialState (angular/node_modules/@abacritt/angularx-social-login/fesm2022/abacritt-angularx-social-login.mjs:374:46)\n' +
    '    at eval (angular/node_modules/@angular/core/fesm2022/core.mjs:6189:43)\n' +
    '    at runInInjectorProfilerContext (angular/node_modules/@angular/core/fesm2022/core.mjs:867:9)\n' +
    '    at R3Injector.hydrate (angular/node_modules/@angular/core/fesm2022/core.mjs:6188:17)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6058:33)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at ChainedInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:15378:36)\n' +
    '    at lookupTokenUsingModuleInjector (angular/node_modules/@angular/core/fesm2022/core.mjs:4137:39)\n' +
    '    at getOrCreateInjectable (angular/node_modules/@angular/core/fesm2022/core.mjs:4185:12)',
  zoneAwareStack: 'Error: NullInjectorError: No provider for SocialAuthServiceConfig!\n' +
    '    at t (angular/node_modules/zone.js/fesm2015/zone-error.js:85:33)\n' +
    '    at NullInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:5626:27)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at injectInjectorOnly (angular/node_modules/@angular/core/fesm2022/core.mjs:911:40)\n' +
    '    at Module.ɵɵinject (angular/node_modules/@angular/core/fesm2022/core.mjs:917:42)\n' +
    '    at initialState (angular/node_modules/@abacritt/angularx-social-login/fesm2022/abacritt-angularx-social-login.mjs:374:46)\n' +
    '    at eval (angular/node_modules/@angular/core/fesm2022/core.mjs:6189:43)\n' +
    '    at runInInjectorProfilerContext (angular/node_modules/@angular/core/fesm2022/core.mjs:867:9)\n' +
    '    at R3Injector.hydrate (angular/node_modules/@angular/core/fesm2022/core.mjs:6188:17)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6058:33)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at ChainedInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:15378:36)\n' +
    '    at lookupTokenUsingModuleInjector (angular/node_modules/@angular/core/fesm2022/core.mjs:4137:39)\n' +
    '    at getOrCreateInjectable (angular/node_modules/@angular/core/fesm2022/core.mjs:4185:12)',
  ngTempTokenPath: null,
  ngTokenPath: [
    '_SocialAuthService',
    '_SocialAuthService',
    'SocialAuthServiceConfig',
    'SocialAuthServiceConfig'
  ]
}

Answer 1

I have resolved this issue by adding SocialAuthServiceConfig inside app.config.ts

here is snippet

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideStore({
      userData: loginUserReducer
    }),
    provideHttpClient(),
    provideToastr(),
    provideAnimations(),
-    {
-      provide: "SocialAuthServiceConfig",
-      useValue: {
-        autoLogin: false,
-        providers: [
-          {
-            id: GoogleLoginProvider.PROVIDER_ID,
-            provider: new GoogleLoginProvider(environment.GOOGLE_KEY, {
-              oneTapEnabled: false,
-            }),
-          },
-        ],
-        onError: (err) => {
-          console.error(err);
-        },
-      } as SocialAuthServiceConfig,
    },
  ],
};