Angular 5 : Cannot instantiate cyclic dependency when import OAuthModule.forRoot()

Question

I want to import OAuthModule.forRoot() in to my project, but it was thrown the following error:

compiler.js:19390 Uncaught Error: Provider parse errors: Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1 at NgModuleProviderAnalyzer.parse (compiler.js:19390) at NgModuleCompiler.compile (compiler.js:19972) at JitCompiler._compileModule (compiler.js:33574) at eval (compiler.js:33505) at Object.then (compiler.js:455) at JitCompiler._compileModuleAndComponents (compiler.js:33503) at JitCompiler.compileModuleAsync (compiler.js:33419) at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230) at PlatformRef.bootstrapModule (core.js:5447) at eval (main.ts:12)

Find the imports and provides which was used in the project below.

  imports: [ // import Angular's modules
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ModalModule,
    HttpClientModule,
    HttpModule,
    TableModule,
    SliderModule,
    DropdownModule,
    MultiSelectModule,
    ModalModule.forRoot(),
    CoreModule,
    SmartadminLayoutModule,
    routing,
    PaginatorModule,
    DialogModule,
    ConfirmDialogModule,
    NgxInactivity,
    NgbModule.forRoot(),
    NgIdleKeepaliveModule.forRoot(),
    Ng4LoadingSpinnerModule.forRoot(),
    NgSelectModule,
    SmartadminModule,
    NotesModule,
    AttachmentsModule,
    CalendarModule,
    OAuthModule.forRoot()
  ],

Provides used:

providers: [ 
    // ENV_PROVIDERS,
    APP_PROVIDERS,
    OrganizationService,
    RecoveryService,
    AuthenticationService,
    HomeService,
    UserConfigurationService,
    RoleRightsService,
    NewsService,
    DashboardService,
    CurrencyService,
    EventTypeService,
    DetailEventTypeService,
    CountryService,
    InvoiceModeService,
    EquipmentSizeService,
    EquipmentTypeService,
    RecoveryDecisionService,
    RegionService,
    StateService,
    ExchangeRateService,
    ThirdPartyService,
    CanDeactivateGuard,
    CanActivateGuard,
    ConfirmationService,
    AttachmenttypeService,
    CityService,
    ExcelService,
    InvoiceService, 
    PDFService, 
    ShippingCompanyService,
    ThirdPartyTypeService,
    NotificationService,
    DownloadService,
    ConfigurationService,
    ReportParameterService,
    DateService,    
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA
  ]
})
export class AppModule {
  constructor(public appRef: ApplicationRef, public appState: AppState) {

  }
}

Having the same issue now. If I find a solution I will post here — ppavlov

ppavlov ppavlov · Accepted Answer · 2019-08-20T17:01:12

I solved the issue by lazy loading the OAuthService. Wherever you use it you need to lazy load it. It seems its an internal issue concerning angular-oauth2-oidc and Angular version 5 that is causing the Cyclic dependency. Another option would be to update to Angular 6. I have tried it and on v6 there is no such error.

  constructor(private injector: Injector) { }

  private get oauthService() {
    return this.injector.get(OAuthService)
  }

Angular 5 : Cannot instantiate cyclic dependency when import OAuthModule.forRoot()

1 Answers