Skip to content

Instantly share code, notes, and snippets.

@brianmriley
Last active May 12, 2021 13:58
Show Gist options
  • Save brianmriley/2e7da40006f0c540439ac24a8f00f5de to your computer and use it in GitHub Desktop.
Save brianmriley/2e7da40006f0c540439ac24a8f00f5de to your computer and use it in GitHub Desktop.
ngx-translate Lazy Loaded Translations Setup
// The following is a configuration example to lazy load translations. It's meant to provide specificity and clarity to
// anyone still wondering how it all fits together, I have the following setup (using abbreviated module definitions):
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// AppModule
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// AoT requires an exported function for factories.
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
imports: [
// NOTE: Normally we'd stick TranslateModule in `CoreModule` but the ability to lazy load
// module translations and extend the main one only works if you set it up in the root `AppModule`.
// Use the TranslateModule's config param "isolate: false" to allow child, lazy loaded modules to
// extend the parent or root module's loaded translations.
TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
isolate: false
}),
]
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// SharedModule
////////////////////////////////////////////////////////////////////////////////////////////////////////////
@NgModule({
declarations: DECLARATIONS,
imports: [
...MODULES,
...TranslateModule
],
exports: [
...MODULES,
...TranslateModule
...DECLARATIONS,
]
})
export class SharedModule {
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// LazyLoadedModule
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// AoT requires an exported function for factories.
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http, './assets/i18n/'lazy-load, '.json');
}
imports: [
// Use the TranslateModule's config param "extend: true" to extend the parent or root module's
// loaded translations.
TranslateModule.forChild({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
extend: true
}),
]
export class LazyLoadedModule {
constructor(protected translateService: TranslateService) {
const currentLang = translateService.currentLang;
translateService.currentLang = '';
translateService.use(currentLang);
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Key Points
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// * Use the `TranslateModule's` method `forRoot()` with config param `isolate: false` in `AppModule` to allow child, lazy loaded modules to extend the parent or root module's loaded translations.
// * Use the `TranslateModule's` method `forChild()` with config param `extend: true` in `LazyLoadedModule` to extend the parent or root module's loaded translations.
// * **DO NOT** attempt to move the `TranslateModule` setup and configuration from `AppModule` to a `CoreModule` as it won't allow the root translations and only works when setup directly in `AppModule`.
// * Force `TranslateModule` to load the `LazyLoadedModule's` child translations by setting the locale on the `TranslateService` in its constructor.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment