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 { }
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With