-
-
Notifications
You must be signed in to change notification settings - Fork 578
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
.forChild() usage with lazy loading routes #425
Comments
Since I didn't found any plunker working with ngx-translate librairy and I also had some difficulties to manage to make it work with LoadChildren, I've created two SharedModules, (one for lazyLoading and one for the other part of my application) SharedLazyModule for lazy loading content:
SahredModule for App
See Plunker: |
@neolanders your answer does not relate to the question, you are posting the solution explained in the README for SharedModule. I'm trying to create a module on top of the |
I believe ngx-translate is broken in regards to its "Lazy loading feature" and since ocombe is now part of the Angular core team, it will probably never get fixed. Most likely, people will have to switch to Angular's i18n functionality once it becomes more rich in regards to its features. |
I wrote a article about how to have 1 json file per lazy loaded module without having to write a new Custom Loader etc... it's quiet simple, only the documentation is not clear in fact: |
@Tuizi your solution is a workaround, since you are basically creating |
@mebibou I'm curious about what contributors think about that. For me it's not a workaround has I simply follow what the documentation say (paragraph "lazy loaded module") |
@Tuizi no I'm saying that's not the point of the issue here. We want to have lazy loading modules being in sync with the master modules, without having to push the changes of |
any progress on this? is Tuizi's solution is indead a work-around. Anyone found a real solution / fix? |
What would be a real solution? I have time to work on a PR and I would like to try to solve this problem, which seems to impact many people. What do you think of that? Core Module export function createTranslateLoader(http: HttpClient) {
// We may need a new loader? To define the folder where i18n's files are, and the extension
return new LazyTranslateHttpLoader(http, './assets/i18n/', '.json');
}
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}) Lazy loaded Module: admin TranslateModule.forChild({lazy: 'admin'}) When admin module is loaded, the file What do you think of that? |
I wouldn't mind having to create different translateLoader per module, just without using
|
I don't think that is true, when I don't use |
Thank you are right. I will check that |
If I understand correctly, the OP wants to lazily load translations along with his lazily loaded modules. We did managed to load translations lazily but used a slightly different approach. All our translations are defined in 'namespaces' and every translation key is prefixed with the namespace (for instance 'validations.required'). Our translations are loaded with a MissingTranslationHandler. The MissingTranslationHandler uses the namespace to determine which translation file to load. So, we're not lazily loading our translations per (lazily loaded) module but per translation namespace. By prefixing your translation keys with your module name you could of course get the required effect. Gist with our MissingTranslationHandler Hope this can help someone. |
Seems the best thing you can do right now is use namespacing, with the -f namespaced-json flag. Seems to be the only solution for modularity. The problem i would like to solve now is a way to globally load the pipe once in a lazy loading environment. I have to use a sharedmodule to load 'TranslateModule.forRoot()' in all my modules for it to work right now, not very efficient. |
@Almar Thanks !! That's a great solution for now. |
@ocombe are you planning to fix/support this any time soon? |
I tried forchild solution but it is not working. Could we have any plunk working well ? Angular version: 6.0.3 Browser: [Chrome Version 67.0.3396.79 (Official Build) (64-bit)] Language: [TypeScript 2.7.2] |
If you use Angular v6, you have to use ngx translate version >= 10
|
@ocombe here my configs: "@ngx-translate/core": "^10.0.2", |
Same here |
Same here (angular 6.1.3, ngx-translate 10.0.2) |
don't get this... do we need to keep
|
Personnaly I still have a issue for getting all my translations... my scenario is : If I dont lazy load I get my translations. There is a sample:
|
My case was:
I solved my problem by adding an option TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
},
extend: true
}), If you're interested, you can get it here: https://github.com/stemda/ngx-translate Probably not good enough for a PR but maybe it helps some of you... |
Hi all, I trying to use this example, but its not working? Why for lazy module translation dictionary not merged with module forRoot?
|
I posted a possible solution for your problem above. If you dont want to check out the fork, just download a patch https://github.com/foo/bar/commit/${SHA}.patch and try it out. |
@stemda omg, nice! I just few minutes already forked for same patch. :) |
@iamruslanbakirov okay, I just started a pull request. |
Hello. If I understand correctly, with "extend" it will be possible to use a shared.json and a module.json file (by lazy loading module) and the "extend" will not overwrite but make an append with shared.json? Would be perfect. Thanks. |
Hey, @Tolitech, sorry for my late response. Yes, that's excactly what the patch does. |
@stemda |
Hey! I'm facing the same issue here and @stemda changes will fix the problem. I'm really looking forward to this PR being merged. Thank you. |
This comment has been minimized.
This comment has been minimized.
@pvkrijesh a working example updated to Angular 8: |
This example does not work exactly. The problem is not just detaching each module into a new json file. But if you have a shared json with 10 translations for example, it cannot be used by others and always has to be copied again, which makes using this way bad. |
Based on the solution @Almar provided, I'm also using the MissingTranslationHandler to determine if additional translations need to be fetched. The parts that I've changed compared to @Almar solution is that I make use of the loader configured inside the translation service. Because a new instance of the TranslationService is created when using the forChild method, this is nicely isolated, the same counts for the missinghandler that is configured. https://gist.github.com/kristofdegrave/64863e249bbc8768fe33fc666dfa8bf5 |
I¡ve developed a lazy loading per module solution through a factory.
import { TranslateLoader } from '@ngx-translate/core';
import { Observable, from, merge } from 'rxjs';
const appAvailableLanguages = ['ar', 'en', 'es', 'fr'];
const defaultLanguage = 'en';
export class TranslateLoaderFactory {
static forModule(module: string): any {
return class LazyTranslateLoader implements TranslateLoader {
getTranslation(lang: string): Observable<any> {
if (!appAvailableLanguages.includes(lang)) {
return merge(
from(import(`../../../assets/i18n/${defaultLanguage}.json`)),
from(import(`../../../assets/i18n/${module}/${defaultLanguage}.json`))
);
}
return merge(
from(import(`../../../assets/i18n/${lang}.json`)),
from(import(`../../../assets/i18n/${module}/${lang}.json`))
);
}
}
}
}
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useClass: TranslateLoaderFactory.forModule('main'),
deps: [HttpClient]
}
}),
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useClass: TranslateLoaderFactory.forModule('mymodule'),
deps: [HttpClient]
}
}), Hope that helps |
Hi, could you share a github project working? i have testest but not work. |
one more workaround to trigger language change globally including lazy modules
|
I am the same problem. Isolet true not working for me. Do you have a solution ? |
After a few days searching, reading and trying other solutions, I found that in my case, my team and I, we had a bad implementation of lazy loading in the routing, we had the component declared in the route, and in the pages module, causing that we only receive the translation in just 1 module instead of all modules where we used TranslateModule.forChild with isolate: true So maybe works to check if the lazy load is ok in your project, the component mus be declare only in each anycomponent-module.ts
|
@Juusmann's solution works for me as well. To be extremely specific and to add clarity to anyone still wondering how it all fits together, I have the following setup (using abbreviated module definitions): AppModule
SharedModule
LazyLoadedModule
Key Points
|
Still having this issue. I can't understand why this issue is closed. The |
LazyLoadedModule - isolated : true -> Main translations file is loaded |
@brianmriley Me and another colleague have worked a couple of days trying to solve this and your solution did work perfectly fine! :) |
Hey @brianmriley ! |
I'm submitting a ... (check one with "x")
Current behavior
AppModule
SharedModule
AdminModule
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]
The text was updated successfully, but these errors were encountered: