Probably one of the most common questions, while the documentation and some other questions I found try to clear up things for me, yet I am still not sure how to fix this.
So this is my structure:
AppModule
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
ContrySelectorModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
export class AppModule { }
CountrySelectorModule
@NgModule({
declarations: [CountryselectorComponent],
imports: [
CommonModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
exports: [
CountryselectorComponent
]
})
export class ContrySelectorModule { }
Selection module:
@NgModule({
declarations: [SelectionComponent],
imports: [
CommonModule,
SelectionRoutingModule,
UspblockModule,
TranslateModule.forChild({//or forRoot, no idea how to configure this
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}})
],
})
export class SelectionModule { }
Now the problem is that I don't want to do the language configuration again within the lazy-loaded modules, because the country selector module already takes care of this. I am not sure now how to correctly configure the lazy-loaded modules (and actually not sure if countrySelectorModule is done correctly). Using the standard github documentation I was not able to pull this off. I've tried messing around with .forChild()
but no luck so far.
Do I need a share module? Do I need to import countrySelectorModule everywhere (not preferred)? Custom loader? t.b.h. I have no idea and the documentation is a bit short for more advanced scenarios.
I solved this by doing the following:
SharedModule
, with below codeSharedModule
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [],
imports: [
CommonModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
isolate: false
}),
],
exports: [TranslateModule],
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [ShoppingCartService, AccountService]
}
}
}
So this makes sure that for every module that imports SharedModule
, TranslateModule
will use the same configuration. Make sure to export it. The forRoot()
also solved making sure that ShoppingCartService
and AccountService
are only one instance and not every lazy-module creating a separate service.
AppModule
@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
isolate : false
}),
SharedModule.forRoot(),
ContrySelectorModule,
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
Since AppModule
is your main entry point, do the forRoot()
call here to TranslateModule
and the SharedModule
.
SharedModule
without any method calls. Also CountrySelectorModule
in my example has to just import SharedModule
and nothing else.