Repository: ngx-translate/core

Issue #425: .forChild() usage with lazy loading routes
Created: 2017-02-11T03:15:31Z
I'm submitting a ...  (check one with "x")
[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
AppModule
export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http, "/i18n/", "/index.json");
}
imports: [
    TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [Http]
            }
        }),
]
SharedModule
imports: [
    //TranslateModule
],
exports: [
    //TranslateModule,
]
AdminModule
export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http, "/i18n/", "/admin.json");
}
imports: [
    TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [Http]
            }
        }),
]

Expected/desired behavior
I would like to load additional JSON files per component / module, i.e. an admin.json for the administration panel of our app.
I would like to import one TranslateModule inside of SharedModule and configure it allow all modules that don't explicite call .forChild().
Both doesn't work, it simply doesn't load the admin.json and hence doesn't translate strings defined in that file.
Please tell us about your environment:


ngx-translate version: 6.0.0-beta.1


Angular version: 2.4.7


Browser: [Firefox 51.0.1]


Language: [TypeScript 2.0]

Duplicate issue #434: Setup for non-root modules
Created: 2017-02-16T15:26:04Z
Hi I'm currently experimenting with this package for one of my projects. I'm building stand alone components wrapped by different modules which can be included in different apps. Some of these modules have some translatable content so I'm looking for a solution to provide the translations in the most efficient way.
Is it possible to use a fresh instance of ngx-translate for each component-module so I can provide the component with his translations?
I followed the shared module approach and ended with something like this:
// app.module.ts (this is the app)
...
export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http);
}
...
@NgModule({
    ...
    imports: [
        ...
        HelloWorldModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: translateLoaderFactory,
                deps: [Http]
            }
        })
        ...
    ]
    ...
})
...

// hello-world.module.ts (this the component module and will be loaded in the app module through npm)
...
export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, 'assets/i18n/helloworld');
}
...
@NgModule({
    ...
    imports: [
        ...
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: translateLoaderFactory,
                deps: [Http]
            }
        })
        ...
    ]
    ...
})
...

The translation file for HelloWorldModule is not loaded so I guess I'm missing something?
Is what I'm trying to do possible? I can provide translations for the HelloWorld module through the translation file included by the app component but that's not ideal for my situation, the Component module can't be separated from his translations.
Image of the architecture:

Closing comment (2017-02-21T02:58:38Z): Probably related to #425?