ngx-translate Lazy Loaded Translations Setup

ngx-translate-lazy-load-config.ts

// 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.