Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cyclic dependency error TransferHttpCacheModule, LocalizeRouterModule, TranslateModule

I need the following modules for my project:

TranslateModule LocalizeRouterModule TransferHttpCacheModule

Somehow this combination of modules is creating a cyclic dependency.

TranslateModule with TransferHttpCacheModule - works TranslateModule with LocalizeRouterModule - works

But when I import all three it's causing a dependency cyclic.

Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppBrowserModule in ./AppBrowserModule@-1:-1

Check the plnkr for reproduction of the problem: https://plnkr.co/edit/qlUQ866JzTa3JtFgSAIO?p=preview

@NgModule({
imports: [
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    TransferHttpCacheModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpTranslationLoaderFactory,
        deps: [HttpClient]
      }
    }),
    LocalizeRouterModule.forRoot([], {
      parser: {
        provide: LocalizeParser,
        useFactory: HttpLoaderFactory,
        deps: [TranslateService, Location, LocalizeRouterSettings]
      }
    }),
    RouterModule.forRoot([])
],
declarations: [
    AppComponent
],
providers: [

],
bootstrap: [AppComponent]
}) export class AppModule { }
like image 452
Bob Singor Avatar asked Nov 27 '17 12:11

Bob Singor


1 Answers

You do not need to have LocalizeRouterModule under imports since it can be injected to providers which is causing the cyclic depdendency.

Fix it as follows,

@NgModule({
    imports: [
        HttpClientModule,
        BrowserModule,
        BrowserAnimationsModule,
        TransferHttpCacheModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [HttpClient]
          }
        }),

        RouterModule.forRoot([])
    ],
    declarations: [
        AppComponent,
        LocalizeRouterPipe
    ],
  providers: [TranslateModule  ],
    bootstrap: [AppComponent]
})

PLUNKER

if you need a working repo, look at this as a example

like image 86
Sajeetharan Avatar answered Oct 19 '22 04:10

Sajeetharan