How to use angularx-social-login in lazy loaded module?

Question

I am working on an Angular demo application. for login i want to use login via google functionality and I am using angularx-social-login (https://www.npmjs.com/package/angularx-social-login) npm but I am facing below error. I am using this in my lazy loaded submodule member module

node_modules/angularx-social-login/sociallogin.module.d.ts:13:21 - error TS2694: Namespace '"C:/Learning technologies/AngularJS/FitHub/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'


ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 324:183-201
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 355:207-225
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 326:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 362:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 324:25-46
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 355:25-46
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 325:26-50
"export 'ɵɵngDeclareInjectable' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 357:25-47
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 356:25-47
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'

here is my code

AppModule

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './Common/navbar/navbar.component';
import { FooterComponent } from './Common/footer/footer.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HomeComponent } from './webComponent/home/home.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { MassageComponent } from './webComponent/massage/massage.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import{JwtHelperService,JwtModule} from '@auth0/angular-jwt';
import { FieldMatcherDirective } from './Common/field-matcher.directive';



export function getJWTToken(){
  return localStorage.getItem("JWTToken");
}

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    HomeComponent,
    ClassesComponent,
    ClassDetailComponent,
    MassageComponent,
    //FieldMatcherDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    JwtModule.forRoot({
      config:{
        tokenGetter:getJWTToken,
        allowedDomains:["localhost:5000"],
        disallowedRoutes:[]
      }
    })

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

appRountingModule

import { Routes, RouterModule } from '@angular/router';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { HomeComponent } from './webComponent/home/home.component';
import { MassageComponent } from './webComponent/massage/massage.component';
    
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'classes', component: ClassesComponent },
  { path: 'classes/:name', component: ClassDetailComponent },
  { path: 'massage', component: MassageComponent },
  {path:'members', loadChildren:()=>import('./Members/members.module').then(module=>module.MembersModule)},   <==== here is lazy loaded module
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),

  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

and finally membersModule

import {SocialLoginModule,SocialAuthServiceConfig, SocialAuthService} from 'angularx-social-login';
import {GoogleLoginProvider} from 'angularx-social-login';

const userRoot: Routes = [
  { path: 'login', component: LoginComponent },
  {path:'forgotPassword',component:ForgotPasswordComponent}
];

@NgModule({
  declarations: [
    LoginComponent,
    ForgotPasswordComponent,
    FieldMatcherDirective
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(userRoot),

    FormsModule,
    ReactiveFormsModule,
  ],
  providers:[
    {
      provide:'SocialAuthServiceConfig',
      useValue:{
        autologin:false,
        providers:[
          {
            id:GoogleLoginProvider.PROVIDER_ID,
            provider:new GoogleLoginProvider('41XXXXXX205-os8kum8al4q1r5cspXXXXXXXcjnv44.apps.googleusercontent.com')
          }
        ]
      } as SocialAuthServiceConfig
    }
  ],
  exports:[
    SocialAuthService   <==== if i put this export or not, it does not make any difference
  ]
})

package.json Snip

"@angular/router": "~10.0.5",
    "angularx-social-login": "^4.1.0",

package-lock,json snip

 "angularx-social-login": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/angularx-social-login/-/angularx-social-login-4.1.0.tgz",
      "integrity": "sha512-nSYLvGhI7MZtN/RxRie5GEl/rytIJPRPeSQSgiXbDESJC9zjuik629kqMCPnLCRk5SfTBrXSNcpZ8X/5kgsDKg==",
      "requires": {
        "tslib": "^2.0.0"
      }

angular version

Angular CLI: 10.0.8
Node: 14.15.3
OS: win32 x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cli                      10.0.8
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

NPM version

{
  xxxxxx: '1.0.0',
  npm: '6.14.9',
  ares: '1.16.1',
  brotli: '1.0.9',
  cldr: '37.0',
  icu: '67.1',
  llhttp: '2.1.3',
  modules: '83',
  napi: '7',
  nghttp2: '1.41.0',
  node: '14.15.3',
  openssl: '1.1.1g',
  tz: '2020a',
  unicode: '13.0',
  uv: '1.40.0',
  v8: '8.4.371.19-node.17',
  zlib: '1.2.11'
}

I tried to read many answers here and Medium.com as well but all those are using the angularx in the main(APP) module and not in submodule.

i have been searching for answers since last 2 days but is unsuccessfull.

can anyone please help me here?

Answer 1

You have to add the SocialLoginModule to the imports

also the version you have based on the package.json you use are using version 4 which is for angular 12, you will have to use version 3 for angular 10

Also remove the service from exports. Services are provided.