Last active
May 12, 2021 13:58
-
-
Save brianmriley/2e7da40006f0c540439ac24a8f00f5de to your computer and use it in GitHub Desktop.
ngx-translate Lazy Loaded Translations Setup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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