Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular translation forchild not loading #1266

Open
Totot0 opened this issue Nov 13, 2020 · 2 comments
Open

Angular translation forchild not loading #1266

Totot0 opened this issue Nov 13, 2020 · 2 comments

Comments

@Totot0
Copy link

Totot0 commented Nov 13, 2020

I have an angular application that uses ngx-translation. For this, I made a Shared module that loads a translation file containing different keys (general errors...) :

`@NgModule({
imports: [
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: TranslateFactory,
deps: [HttpClient]
}
}),
],
exports: [TranslateModule],
})

export class TranslatorModule {
constructor(translate: TranslateService){
translate.addLangs(['fr']);
translate.setDefaultLang('fr');

const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/fr/) ? browserLang : 'fr');

}
}

export function TranslateFactory(http: HttpClient) {
return new TranslationService(http, 'assets/i18n');
}`

In my AppModule, I load this module and I also load another translation file via forRoot :

`@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: TranslateFactory,
deps: [HttpClient]
}
}),
],
bootstrap: [AppComponent]
})

export class AppModule{

}

export function TranslateFactory(http: HttpClient) {
return new TranslationService(http, 'assets/i18n/myApp');
}`

My problem is that only translateService.forRoot works. Translations from translateService.forChild are not loaded

Then I just use my shareModule in my loaded modules in lazy loading mode

@Yqnn
Copy link

Yqnn commented Jan 18, 2021

I've the same issue, I think it's because the same TranslateService is shared in the 2 modules, and it uses the configuration given in 'TranslateModule.forRoot'.

@eulersson
Copy link

For lazy-loaded modules with different translation loaders (loading .json from different files) it seems to be either (in the case of the lazy-loaded):

  • (LazyModule isolate: false, extend: true) React to parent module translation events automatically without having to connect anything, just as they say, but cannot load the lazy loaded specific files.
  • (LazyModule isolate: true, extend: true) We have to propagate changes to parent's translation event changes to the lazy child ourselves, and we can have our specific translations working! But the parent's translation won't work.

It's like I can't blend the two.

I got pretty close though maybe you could have a look and play within StackBlitz: https://stackblitz.com/edit/translations-and-lazy-loading?file=README.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants