Core: Why ngx-translate exists if we already have built-in Angular2+ i18n ?

[chaouiy]

why should someone choose this package instead of the official i18n module ?

[SamVerschueren]

Because you don't always want to reload your entire application when someone switches the language. Angular i18n forces you to build the application per language.

[chaouiy]

As mentioned in the official documentation we have the choice between JIT/AOT compilation

[jlberrocal]

Because they aim to different purposes, for example try to change your application language with a click with the native library of angular

[ocombe]

Hello,

this is a good question, and as I am working on i18n in the Angular core team I am probably the best to answer this.

The idea behind this lib has always been to provide support for i18n until Angular catches up, after that this lib will probably be deprecated. For now, there are still a few differences between Angular i18n and this library:

• Angular only works with one language at a time, you have to completely reload the application to change the lang. The JIT support only means that it works with JIT, but you still have to provide the translations at bootstrap because it will replace the text in your templates during the compilation whereas this lib uses bindings, which means that you can change the translations at any time. The downside is that bindings take memory, so the Angular way is more performant. But if you use OnPush for your components you will probably never notice the difference
• Angular only supports using i18n in your templates for now, I'm working on the feature that will allow you to use it in your code, but it's still a work in progress. This lib works both in code and templates
• Angular supports either XLIFF or XMB (both are XML formats), whereas this lib supports JSON by default but you can write your own loader to support any format that you want (there's a loader for PO files for example)
• Angular supports ICU expressions (plurals and select), but this library doesn't
• Angular supports html placeholders including angular code, whereas this library only supports regular html (because it's executed at runtime, and not during compilation, and there is no $compile in Angular like there was in AngularJS)
• The API of this library is more complete because it is executed at runtime it can offer more things (observables, events, ...) which Angular doesn't have (but doesn't really need given that you can not change the translations)

[chaouiy]

Perfect Answser TY !

[josersleal]

So why dont you at angular call the guys from ngx and integrate ngx instead of reinventing the wheel?
Ins't that the point of open source?

[ocombe]

@josersleal that's exactly what they did, the angular team hired me to improve i18n for everyone
But there is no way to integrate my lib directly into the core, after working for 3 months for the core team I can tell you that Angular i18n is much more complex and elaborate than my lib. It handles a lot of more complex stuff, and it does it without all the bugs and shortcomings that my lib has.
I understand that it's frustrating that the core doesn't evolve as fast as what a library can do, but there are reasons for that, and the first one is that you cannot implement something and change it whenever you see that you forgot to include a use case. Everything has to be thoroughly planned and thought.
Still, you will have most of the things that this lib can do in the core in the future, but it might take a year before we get there unfortunately. The good news is that it's going to be much better than my naive implementation.

[josersleal]

Hi

Sorry I missed that part :)

Keep up the good work..

Thank you:

José R. S. Leal

On 15 May 2017 at 14:24, Olivier Combe [e-mail] wrote:

@josersleal https://github.com/josersleal that's exactly what they did,
the angular team hired me to improve i18n for everyone
But there is no way to integrate my lib directly into the core, after
working for 3 months for the core team I can tell you that Angular i18n is
much more complex and elaborate than my lib. It handles a lot of more
complex stuff, and it does it without all the bugs and shortcomings that my
lib has.
I understand that it's frustrating that the core doesn't evolve as fast as
what a library can do, but there are reasons for that, and the first one is
that you cannot implement something and change it whenever you see that you
forgot to include a use case. Everything has to be thoroughly planned and
thought.
Still, you will have most of the things that this lib can do in the core
in the future, but it might take a year before we get there unfortunately.
The good news is that it's going to be much better than my naive
implementation.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ngx-translate/core/issues/495#issuecomment-301447941,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC_xuFmBomH56LAVc_V9HpBThjWzEBR4ks5r6DX7gaJpZM4MxgA4
.

[jaska45]

Olivier has done a great job. The native Angular I18N has many advantages over all 3rd party I18N libraries.

• Minimal impact to templates. You don't have to refactor all elements to use translator pipe but simply mark them with i18n attributes.
• The original string in in the template an not in resource file such as .json
• Extract tool will extract strings from templates and hopefully soon from .ts too.
• Extract tool extracts source code location and optional description and meaning. Developers can easily add comments that are essential in many cases.

Of course this approach has some limitations:

• Cannot reuse the same string on multiple places. That would be a nice new features
• Source code cannot easily use the string defined in the template. Of course code can find the DOM element and get the string from there. Would be a nice to have an easy way to refer a template string from .ts.

[aghilesh]

@ocombe : Is there any plan to add runtime language switching feature on i18n+AOT ? Right now application is planned to use ngx-translate over i18n because of the run-time switching constraint.

[ocombe]

Yes it's planned for the 5.x branch probably, not 5.0 though, we have too
much on our plate for that

Le mer. 2 août 2017 à 21:59, aghilesh [e-mail] a écrit :

@ocombe https://github.com/ocombe : Is there any plan to add runtime
language switching feature on i18n+AOT ? Right now application is planned
to use ngx-translate over i18n because of the run-time switching constraint.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/ngx-translate/core/issues/495#issuecomment-319781455,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAQMopxEs3C1QIGT2K4ezy93rJ_ss0s1ks5sUNU4gaJpZM4MxgA4
.

[imraqes]

How dificult is it to move from ngx-translate to angular i18n, I have already implemented ngx-translate so if I have to change is it too much work around ?

[jlberrocal]

is a totally different structure, however i don't see a possible reason for change ngx-translate for native i18n

[neridonk]

Does anyone know when this : Angular only supports using i18n in your templates for now, I'm working on the feature that will allow you to use it in your code, but it's still a work in progress.

will happen?

[ocombe]

It won't be for 5.0, it should be before 6.0 (so before march 2018). Unfortunately I don't have a more precise date

[DerekJDev]

@ocombe My application is currently using this library to do the translations, would you recommend switching to the angular i18n to not run into future problems? Would it be worth the time to switch over?

[ocombe]

if you can (meaning if you don't need translations in the code), it's definitively worth it yes

[DerekJDev]

Good to know @ocombe , thanks!

[jasonever]

@ocombe

I need your advice , i'm building a chat application (Web and Mobile app) .. So i'm confused about going ahead with using Angular i18n or Ng-Translator ? especially i saw your comment in github before that in March2018 Angular will release an edition that i18n has more features like dynamic load feature same like NG-Translator ..so i will be able to switch to another language without reloading the app (in realtime) is this correct or what ? i need your advice .. Thanks :)

[ocombe]

The way it's going, you'll never be able to dynamically change the language in Angular. It's clearly not a priority for Google and they don't think it's a problem if you have to reload the app completely to change the locale.

[denizengin]

@ocombe How about being able to do translations in code, is that likely to arrive soon to Angular i18n?

[ocombe]

Yes that's coming soon, we are adding runtime i18n in v6.0 and then code translations right after that (or maybe at the same time)

[beachjf]

The main problem with the fact that every language has their own app is it's really difficult to make the app share the same session. I'm actually facing this issue with angular 5 app combinnr with identify server

[ibagaric]

@ocombe I am in the moment where i need to decide, should I use Angular i18n or ngx-translate.
In the future, will Angular i18n have possibility to export translates to JSON or PO file.
Is there any easy way to read XLIFF or XMB format with some GUI so it can be easily given to translators.
What lib to use, what is your advice? Thanks in advance!

[ocombe]

In the future, will Angular i18n have possibility to export translates to JSON or PO file.

yes, I'm lobbying hard to get this, and we'll have it one way or another (either we support it ourselves, or we open the API and I'll make a lib for it)

Is there any easy way to read XLIFF or XMB format with some GUI so it can be easily given to translators.

there are a lot of websites for translators that you can use, some of them have a free tiers
some good ones include:

• poeditor (claims to supports angular)
• crowdin (free for open source)
• oneskyapp (unlimited free tiers as long as you translate yourself)

What lib to use, what is your advice? Thanks in advance!

if you can use the official implementation, then use that, it's more performant, the limitation is that it's limited to what is offered whereas with ngx translate you can always extend it via plugins, or even fork it if necessary

[jaska45]

Please do not add any new formats! You already have three: XMB, XLIFF 1.2 and XLIFF 2.0. Most other platforms have only one :-)

Almost all online translation services claim to support XLIFF. The reality is that XLIFF is very complex format and Angular's extract tool can create pretty complex XLIFF. Especially if you have plurals, genders, links or inline formatting elements. In addition Angular XLIFF files contain many proprietary properties such as meaning and location. What I have noticed is that a generic XLIFF parser/scanner cannot properly handle Angular's resource files. This is why it is better that the localization tool uses a dedicated Angular parser that can property handle the resource files.

But this is perfectly fine. The main task of a localization tools is to scan the source files and in that process extract all information that is needed. I am glad that Angular resources contain all the information needed to fully extract strings and enable continuous localization where translation and development can work independently to each other.

[ocombe]

80% of the people want JSON (according to the survey I did 2 weeks ago). But it'll probably be an external lib (opening the API) instead of something included by default in Angular just because there is no real spec for JSON translations
XLIFF would still be the best way to do things because translation tools support that, but if you have a small app and you don't want something as complicated as XLIFF, then JSON would be just fine, and you can edit it in your IDE.

[daric81]

@ocombe off topic but I'm looking at options for i18n, we have a large angularjs app which we will move to angular 5+ perhaps in 12-18 months time. There's the angular i18n/ ngx-translate consideration for the future, but just wondering from your experience with all 3 solutions what you'd advise would be the least upgrade headache for angularjs i18n?

[ocombe]

What are you using with angularjs right now? If it's angular-translate then updating to ngx-translate should be super easy

[daric81]

@ocombe We aren't using anything, but are using angular 1.6 and cant migrate to angular yet before translation. A concern is having resource files that are compatible as a minimum and the least migration effort.

[ocombe]

if you're migrating in 1+ year I think that regular Angular i18n will be the best choice by then :)

[daric81]

@ocombe thanks. If that's the case then i might take more of a look at i18next before proceeding. Have you had any experience of i18next?

[ocombe]

No, never tried it

[daric81]

@ocombe cheers, appreciate your advice and time :)

[NVK15]

@ocombe Can i know when this:

Angular only supports using i18n in your templates for now, I'm working on the feature that will allow you to use it in your code, but it's still a work in progress.

will happen?
I am currently working on Angular app and would like to start using i18n. I have cases where I have to use i18n extensively in typescript code. So any idea when there would be latest release for i18n with support for i18n in code?

I just checked the release schedule and it says Angular 6.0 release data as "2018-04-04".
Does this release address i18n in code?

I look forward for your reply.

Thanks in advance.

[ocombe]

It should, if not it'll be in 6.1 a month later, you can follow the PR here: https://github.com/angular/angular/pull/22654
That being said, it'll be for the new renderer (ivy) only, and I'm not sure if it'll be 100% usable by then

[milanc]

Hi @ocombe,
I am working on project that has requirement to allow customers to customize labels/messages (usually this is only a small amount of labels) and I ended up using both i18n and ngx.

With i18n and AOT application is generated for every supported language, and customers are able to define their own labels that are served from API and "injected" on client side using ngx library.
I did some tweaks to ngx code to skip processing html element if label is not defined in translations JSON (by default it is injecting label key from directive).

Anyway, not sure if allowing customers to override application labels/messages is common scenario but it would be good if i18n approach could support something like this.

As I saw in code generated when using 18n attributes, strings/labels are injected using js code, would it be hard to check for overrides (maybe some translations service dependency) before using pre-compiled strings.

Hope this make sense.
Thank you.

[ocombe]

It's in our plans for angular to support library translations so that people can define their own translations for a library that is i18n-compatible

[milanc]

That sounds good, I hope that will come soon.
Thank you.

[ndr508]

I am working on a project where we have to set up the infrastructure to support internalization on front end. There is no immediate current need to support multiple languages at this time. However, when needed we would like to have the current design support this. The idea is to implement the internalization for English language currently. I am looking at both Angular i18n and ngx-translate features. As it seems from the above discussion threads, even though Angular i18n is lacking some features currently compared to ngx-translate, those would be eventually be added to Angular i18n, correct?

Can you please suggest whether it is good to with ngx-translate or Angular i18n?

Thank you!

[SoftwareDevFromLA]

@ocombe - My question is in regards to: add runtime language switching feature on i18n - I noticed that you mentioned it's planned for the 5.x branch, but looking through the i18n doc I dont see anything that references it. Can you please tell me if its implemented and also point me to some sample working code?

[ocombe]

It's been postponed twice already. It's scheduled for v7 now, we needed the new renderer (ivy) to make it possible.

[RezaRahmati]

@ocombe - great work, is this feature Angular only supports using i18n in your templates for now, I'm working on the feature that will allow you to use it in your code, but it's still a work in progress. scheduled for v7 or it's available on v6, also if there is a simple example how it will be?

[shabinpshams]

@ocombe - I am working on an application which has both web and mobile. Developing application using Angular 5 with i18n. I also wanted to use the same code base to Ionic application and i couldn't find any support on ionic framework for i18n.
Please help me to solve this issue.

[lizzymendivil]

Hi there!
19 September, 2018
what is the status for i18n Angular please?
I need to internationalize my app, need to decide between ngx-translate and i18n built-in tool

@ocombe
(using angular 6)

[ocombe]

If you need it now go for ngx translate. Ivy won't be stable until next year probably.

[lizzymendivil]

Thanks @ocombe so ngx translate won't be deprecated soon, right?

[ocombe]

no

[Diemauerdk]

Hi @ocombe

Using Angular 6 i18n - do you know if it is possible to get the translation text using typescript? for example using an id?

From the documentation(https://angular.io/guide/i18n) it seems only to be possible in a template.

Thanks

[DerekJDev]

@Diemauerdk if you need to get the translation in your component, just import the TranslateService and assign it in your constructor. Then you can use this.translateService.instant('[insert translation string]') to get the translated string.

[Diemauerdk]

Hi @Derekjohnson277

Thanks for the reply - cant' find that TranslationService. In what package/module does it come from?

[DerekJDev]

import { TranslateService } from '@ngx-translate/core';

[Diemauerdk]

@Derekjohnson277 but my question was how to do it using Angular 6 i18n (https://angular.io/guide/i18n) and not ngx-translate :)

[DerekJDev]

Ah haha my bad, from what I have read in the past Angular i18n doesn't support translations outside of the template, but maybe it has been upgraded to add that feature. The reason I still use ngx-translate is for in component translations.

[Diemauerdk]

@Derekjohnson277 , Thats fine :D

[lizzymendivil]

@Derekjohnson277 yeah, I think the same as you... ngx-translate looks better than Angular i18n
I really don't like the idea of deploy my app for every language and I prefer json format.

[Diemauerdk]

@lizzymendivil Yes at the moment it does look a lot better. But I am to build a large future proof solution so i cannot base it on something that's going to be deprecated.

[lizzymendivil]

@Diemauerdk ok, but angular i18n looks unstable because ng serve --aot --locale es is not working anymore, I got this error: Unknown option: '--locale' So, now it is working differently, things are changing.

[ocombe]

it's --i18nLocale (cf docs: https://angular.io/guide/i18n#template-translations)

[CherryCoder91]

I noticed Ivy is now at 92.47% completion with 11 items pending 3 of which are I18N: translate text literals, rearrange text nodes and ICU.

I am trying to understand the following:

1. Will I18N be compatible with AOT in angular with Ivy?
2. Will Ivy support real-time text translations when changing language on the fly (i.e. will ivy bake the translations for all languages into the compilation and bind the text literals?)
3. Is there a documented / preferred strategy for serving the different compilations of the site based off user/account preference at the moment while there are different compilations per langauge?
4. When are we likely to see the I18N work completed? Is this now a high priority given it is one of the few remaining major items for Ivy?

Any input on the above would be massively appreciated I am on a huge localisation epic at work with a lot of product managers hammering me!

[ocombe]

1/ Of course yes
2/ No, changing the language will require to reload the app, for now and the foreseeable future
3/ I don't understand the question
4/ Yes, and yes it's high priority, we've found a replacement for Victor who left the team last summer, and we now have someone working 100% on the compiler part of i18n. I work 100% on the runtime part, and misko is helping us both with the design.

[CherryCoder91]

@ocombe Thanks for the super quick reply 👍

Sorry to be confusing for 3/ let me re-word:

My current understanding is that when we compile the app in a specific locale it finds and replaces the strings in the compiled templates during compile time (AOT). This results in a deploy-able version of the site per locale. This is great for optimisation of the size of the app bundle but adds challenges in deployment of the site. In our app we would like the user to store their preferred locale as a setting within the app and then have that locale served out while still accessing the same site domain. i.e app.mycompany.com could return the app in French / German / Spanish / etc based of the users preference. But given the app would have to load to first fetch that information I was wondering if the Angular community has a preferred / documented method for achieving this this as I don't have any previous experience in it? Does Angular have a mechanism for this or would we need to use some server side tech / force the user to use a different domain i.e. de.companyname.com, fr.companyname.com etc.

Sorry if I am asking about something with an obvious answer, just completely inexperienced in this area and want to make sure I am following best practices if we stick with the angular I18N.

[ocombe]

For now this is how it works yes, it replaces the strings in the compiled templates.
With runtime i18n (in ivy) you'll load the translations at runtime, which means one bundle for all languages, and you can apply the language that you want when you load the app (but you'll have to reload the app to change the language, because once the templates have been compiled with one language, they are cached). This means that you could potentially apply some logic at runtime to load the language file that you want, as long as it runs before any template is compiled. For performance reasons it would be better to have the language files pre-loaded, otherwise you'll see a blank page until it's loaded.

I don't know what's the best method to load the files right now, but I'd say that you should probably do some server-side detection based on either browser language / cookies / user preferences in the database / sub-domain / specific url pattern, and then serve the correct file.
All of that can work server side with nginx rules (or equivalent, like node express, ..., depending on what you use).
You can find an example of an nginx file here: https://github.com/skeletons-projects/angular/blob/master/config/nginx.conf

[CherryCoder91]

Thank you :)

The work you guys are doing for the community is awesome. we all appreciate it :)

[tatsujb]

The way it's going, you'll never be able to dynamically change the language in Angular. It's clearly not a priority for Google and they don't think it's a problem if you have to reload the app completely to change the locale.

they have a screw loose then... :/

[amustiere]

Hello,
I have to design an application with Angular 7, and have some i18n issues / questions.
The application should work like this :

• front page with login form and combo to choose language (we can "hardcode" the few labels for this page in the different languages)
• if login succeed (based on a service and back-end call), go to the first "real" screen of the application, of course displayed using the selected laguage

What would be your approach to address that kind of scenario?
Can I go with Angular i18n (would be my first choice) or should I use something else (ngx-translate for example)?
Can I have only 1 app or should I go with 2?
If going with 2 apps, how is it possible to "share" infos (login token for example) between the 2 apps?

Thanks in advance for your replies.

[tatsujb]

@amustiere I did exactly what you envision and I ended up using ngx-translate when I had wanted to use Angular's own wip i18n.

you can accomplish it with Angular's i18n as well but it isn't as performant and is a headache to setup with how you serve the different compiled frontends, while ngx-translate is a breeze to set up and really responsive.

[amustiere]

@tatsujb Thanks for your reply.

I started a little "sample app" with ngx-translate but I am facing some issues.
The other parts of the application are lazy-loaded.
And I can't load the JSON files as I want.

I have a JSON file for the main page (main module), loaded with custom loader and forRoot.
I also have a JSON file for the secondary page (secondary module), loaded with (another) custom loader and forChild.

I've tried with "isolate: true" and "isolate: false", but no luck so far :-(

Any idea?
Or sample code?

Thanks in advance for your replies.

[amustiere]

Just to explain a little the "no luck" in previous comment...

The idea is to have some translation in the "main" JSON and other in the "secondary" JSON.
And when the user navigates to the secondary page (module / component), to load the secondary JSON and add it to the main one.

If I use "isolate: true", I load the secondary JSON but I lost the "main" one.
If I use "isolate: false", I do not load the secondary JSON so I have only the "main" one.

My goal is to have both loaded and all translations available.

Is it even possible?

[tatsujb]

@amustiere I might not be the right guy for your issue. I'm not entirely sure I understand it. I had a relatively simple setup of ngx-translate for my app even though my app is quite big.

I struggled with loading the JSON files at first because I'd assumed angular could simply import them like any other file but as it turns out the only possibility is to load them as a REST observable (you make a http get API call to the Json file and you'll in return get it's content back (yes asynchronously, I know, it's annoying but that's how it is.)

this.api.getCurrentLocaleJSON(this.store.locale).subscibe((data) => {
  console.log('hello I am a language file, you should probably put me in a store of some sort  : ', data.json());
});

and in you api service :

getCurrentLocaleJSON(locale): any{
    const apiURL = `/assets/${locale}.json`;
    this.locale =
      this.http
        .get(apiURL);
    return this.locale;
  }

note that I personally don't have "/assets/" I have "${apiURL}assets/" because it may be slash or not depending on whether or not I'm in dev or prod, so adapt the url to suit your needs.

also note that I personally only load the JSON file I presently need but you can, of course, create a separate API for each language and load all of them into separate store variables this way all of them are available at the same time though I don't really see the point?

[ocombe]

@amustiere you can use this loader: https://github.com/denniske/ngx-translate-multi-http-loader

[HamzaDevz]

Hi @ocombe,

With Angular 7 do we have some news for i18n?

[amustiere]

@ocombe I've seen this (multi-http-loader), but that's not want I want to achieve.
My idea is to have separate JSON files (say 1 per module) and, at the end, have all the translations available (that is if the user navigates in all the application).
For example:

• in an 'app/en.json' (loaded with the AppModule) I would have shared translations and specific translations for the first screen
• in an 'xxx/en.json' (loaded with the XXXModule which is lazy-loaded), I would have specific translations for this XXXModule, and be able to use the shared translations
  Is it more clear?

[ocombe]

@HamzaDevz not in v7, but with ivy yes
@amustiere hmm it doesn't seem possible if you want separation of concern, at least not easily

[RobinvanTienhoven]

@amustiere, is this (lazy loaded translation per module) what you are looking for?
He creates seperate translation files for each lazy loaded module and also loads a shared file for shared translations.

On topic:
The need for Angular I18n to create a build for every language is a real dealbreaker for me. Was hoping the on demand translation switch would be implemented in Angular 7.0. Oh well, back to ngx-translate then..

[amustiere]

@RobinvanTienhoven I've tried this solution, but doesn't work for my scenario.

When a secondary module is lazy loaded :

• if "isolate: true", I only get the translations for this module, and "lost" the main (app) translations
• if "isolate: false", the translations for this module are not loaded

If you happen to have make it work, I'm very much interested ;-)

Thanks

[RobinvanTienhoven]

@amustiere, now I look better into it it does make sense that that doesn't work (probably also why there isn't a plunkr included like he said he would do). The only way I can think of is make yet an other service that holds the shared translations an include it in your other components where you need it. But that kind of defeats the whole point of having a separate loader...

So sorry, but I guess I don't know the solution either.

[amustiere]

@RobinvanTienhoven I've thought of the "shared service" approach, but I'm not confortable with it (like you said, it defeats the whole point...).
Thanks anyway!

[manzonif]

@ocombe I've seen this (multi-http-loader), but that's not want I want to achieve.
My idea is to have separate JSON files (say 1 per module) and, at the end, have all the translations available (that is if the user navigates in all the application).
For example:

• in an 'app/en.json' (loaded with the AppModule) I would have shared translations and specific translations for the first screen
• in an 'xxx/en.json' (loaded with the XXXModule which is lazy-loaded), I would have specific translations for this XXXModule, and be able to use the shared translations
  Is it more clear?

@amustiere
My idea is the follow:
1) include a param resourceFile in the route config of page/lazy-loaded module

{
        path: 'login',
        loadChildren: './main/authentication/login/login.module#UserLoginModule',
        data: {
            resourcesFile: 'pages/login'
        }

2) Create a page-base.component that get the resourceFile param and load the specific json file

@Component({
    template: ''
})
export class PageBaseComponent {
    protected translateService: TranslateService;
    protected activatedRoute: ActivatedRoute;
    protected http: HttpClient;
    protected router: Router;
    constructor() {
        // carico il file di traduzione specifico per la pagina
        const injector = AppInjector.getInjector();
        this.translateService = injector.get(TranslateService);
        this.activatedRoute = injector.get(ActivatedRoute);
        this.http = injector.get(HttpClient);
        this.router = injector.get(Router);
        this.router.events.pipe(
            filter(event => (event instanceof NavigationEnd)),
            map(() => {
                const snapshot = this.activatedRoute.snapshot;

                let child = snapshot.firstChild;
                while (child.firstChild !== null) {
                    child = child.firstChild;
                }
                return child.data;
            }))
            .subscribe((data) => {
                if (data.resourcesFile) {
                    const t = this.translateService;
                    const loader: TranslateResourceLoader = <TranslateResourceLoader>t.currentLoader;
                    loader.getTranslation(t.currentLang, data.resourcesFile)
                        .subscribe(obj => {
                            t.setTranslation(t.currentLang, obj, true);
                        });
                }
            });
    }
}

Hope this helps.

[manzonif]

@ocombe, thanks for the precious informations.
In my scenario I need that the user can switch to another language, but keeping his favorite UI language.
With this library I think it's something achievable. What about Angular i18n?

[ocombe]

To switch the language with Angular i18n you need to reload the app

[manzonif]

To switch the language with Angular i18n you need to reload the app

Yes, I understood this, but I was wondering if it was possible to load two different languages at the same time, from different files. One related to the app and the other to the User Interface.

[ocombe]

Not right now, but it should be possible with the new runtime service with ivy if you choose to load the translation files at runtime (and not at build time). You will be able to load multiple translation files. We don't really care about what language they are using, it'll be up to you to load the files that you want to use.

[manzonif]

Cool! Thanks.
Is the code you're talking about already available in the Angular repository?

[manzonif]

Got it. https://www.youtube.com/watch?v=miG-ghJhFPc

[joannepham2018]

@ocombe Is Angular's i18n support translation string in typescript for Angular 7?

[ocombe]

@joannepham2018 not yet no, it'll be available with ivy

[joannepham2018]

@ocombe if we need to localize our strings in Angular application now and we need do the translation strings on both template(html) and code(typescript) should be using ngx-translation now.
Later when Angular's i18n is completed with supporting translation string in typescript then is there any easy way to migrate from ngx-translation to Angular's i18n?

[ocombe]

I plan to make a "compatibility" library that will use ngx-translate syntax while using the new angular service under the hood so that you can migrate at your own rhythm. But since the new runtime service isn't designed yet, I don't know if it'll be possible. There might still be some changes to do (like the config).

[schankam]

I have to say thanks @ocombe for all of your messages, it's really helping a lot in making a decision between going for the native solution or the library you did. I'm facing the situation where I need my app to be translated, and I kind of feel sad I cannot use the native implementation right now because of what is "non-sens" to me (like having to reload the app to switch the language dynamically, or translated text located in my typescript files). Moreover, my app is a PWA and I really wonder how it is going to behave if I am displaying a language switcher in my standalone app (since it's going to load "an other" app on language change. But well, the manifest file is supposed to be the same so it should work I guess...)

I will stick to ngx-translate for now, as long as it's not going to be deprecated in the following months I am happy with it. Also, I believe that serving JSON translation files is not really nowadays with compression and PWA caching... And the "binding" speed issue for me kind of goes unnoticed, really..

[lefoulkrod]

@ocombe Just to clarify, Ivy will support swapping the localized content at runtime against a single AOT compiled version of the application?

A use case that would be nice is to let customers provide their own localizations for languages. It would be difficult to do this if the application had to be recompiled with these user supplied localization files, considering a product that lives on premise and is not a saas.

[ocombe]

you will be able to set the translations at runtime, using an external file that you didn't bundle into your app (so no need to recompile), but you won't be able to change the language without reloading the app (for now at least)

[milanc]

Hi @ocombe, thank you for still responding to this old conversation.

I hope that file can also be an API endpoint and it can be loaded on demand from browser.
Also that it will not require for all translations to be present.
As I've mentioned before, I was using ngx/translate (with small tweaks) to do this partial overrides on runtime.

When looking at current bundling result for i18n sample app I see this
_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵted"](-1, null, [" Bonjour i18n !\n"]))
As I remember from research I've done some time ago _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵted"] is getText or some similar angular method.

I was wondering could it be simple as tweaking
getText(-1, null, [" Bonjour i18n !\n"]))
to
getText(-1, null, [someInjectedServiceOrState.introductionHeader || " Bonjour i18n !\n"]))

As you are probably aware introductionHeader is translation id set in markup as part of i18n attribute.

[ocombe]

The ivy code has been rewritten from scratch :)
If some translations are missing, it will use the original template text instead (english for example if you used that in your code).
Yes you will be able to load translations from an API, but it'll delay the bootstrap of your app

[milanc]

If some translations are missing, it will use the original template text instead (english for example if you used that in your code).

If app has built with en-us and fr-fr resources, I assume that when en-us version is loaded it will use en-us strings, but if app is displayed in fr-fr it would use fr-fr text that was generated during AOT compilation, correct?

Sorry for bothering you and keeping you from working to implement all this new stuff :)

[ocombe]

If you load the translations during aot compilation, it should replace the strings in the generated bundle, exactly like it works right now. So you can build your app for each language (like right now), or simply load the translations at runtime.
The first solution is more optimized in terms of loading time and bundle size, but sometimes it's too complicated to do that because you'll need some kind of server side routing to load the correct bundle for each language.

You could also bundle all languages in the same bundle, if you prefer to optimize bootstrap speed over js downloading size (the js bundle will probably be cached after the first visit anyway).

[ls-matheo-jaouen]

Hey I didn't followed this chan since a month but I'm still wondering, how do you plan to make dynamic translation based on xlf files with Angular i18n? I mean, translation are parse/computed on during AOT comp but what for dynamic translations? We gonna always need dynamic translations in a real single page app nop? So, how do I mount xllf files in the browser (I wont make an xml parser x) )? Do you plan to fallback to a json plan? Not sure to understand.

[ocombe]

For dynamic translations you'll have to bundle the parser with your app (it should work automatically depending on the format of translations that you use).
The parsers for xlf/xlf2/xtb will be provided by us (since we already have the code in the compiler right now).
But we are aware that it's a lot of js code to bundle just for that (I think it's at least 10 or 15ko minified for each parser, because XML sucks!).
We're thinking about different solutions for that:

• you can bundle the translations at build time, they will be preparsed/optimized and you won't need the parser at runtime, it should also be more efficient. But that doesn't always work, if you're loading the translations from a database for example
• you can use a custom parser, including a json parser which should be very small in terms of size. I'm not sure yet if I'll be authorized to write one for core (but I'm optimistic, because there's already an official json format for translations developed by google and called ARB (https://github.com/googlei18n/app-resource-bundle/wiki/ApplicationResourceBundleSpecification), we should be able to reuse that, and it would make sense for us to support that format officially, since it's made by Google!). If not, then I'll write one on my own time anyway, it should be relatively easy and light.

[ls-matheo-jaouen]

you can bundle the translations at build time, they will be preparsed/optimized and you won't need the parser at runtime, it should also be more efficient

I don't understand, how do you that? You mean, converting on build time xlf to json and load it into the app (bundled or not)? Otherwise how do you make a simple key match like translate('string to translate') ? It's done in one or two line to make a pipe with json files but how to deal with xlf files? Thanks.

Edit: Oh sorry "We're thinking about different solutions for that:" well, no solution yet right?

[ocombe]

Yes there is nothing yet. We're working on fixing the bugs in ivy before we can work on new features like code translations :)

[ls-matheo-jaouen]

ok, I didn't see anything about that in the official documentation, would be great to add an explicit line I think and to suggest an alternative like your solution nop? It's like a huge lack for a framework.

[milanc]

I believe I was not explaining the use case correctly.

1. use i18n tags to prepare for localization
2. create xlif files for multiple languages with cli
3. build application with AOT for every supported language
4. serve language specific app based on user preference
   
   
   
   • app is bundled with AOT
   
   
5. when app is loaded in browser, code would load overrides for labels (for current language)
   
   
   
   • for this step I am using ngx-translate in the same places together with i18n tags in step 1
   
   
   • ngx-translate was tweaked to skip modification html node if label id is not in loaded json
   
   
   • this step would not be required if app is not using per customer/user overrides
   
   

So all steps but the 5th are regular i18n process but I hope that step 5 would be possible without need for workarounds.

[suryab21]

Hi @ocombe,

I am migrating from ngx-translate to i18n and using Angular v7. I would require translation in .ts file at code level in my component where i have no template file available.

1. Is the translation in .ts file now available in Angular v7?
2. Is it recommended to use i18n when we have some requirement where we need translation in .ts file OR is it good to have the existing ngx-translate in place?

Could you recommend and suggest any approach to do the translation in .ts file as there are some work around available on google but not sure if they are really useful and will not produce any performance issues in future.

Thanks in advance !

[ocombe]

1/ yes you can do that if you use JIT
2/ either wait for ivy and the new runtime i18n, or use JIT or use ngx-translate. Using JIT for now will make it easier for you to migrate to runtime i18n when it's released, but you'll loose on performance for a while

[suryab21]

1/ yes you can do that if you use JIT
2/ either wait for ivy and the new runtime i18n, or use JIT or use ngx-translate. Using JIT for now will make it easier for you to migrate to runtime i18n when it's released, but you'll loose on performance for a while

@ocombe
Thanks for you quick response on this!!!

Does this also mean that the polyfill https://github.com/ngx-translate/i18n-polyfill by you can only be used with JIT and not with AOT?

many thanks for providing your clarifications on this.

[ocombe]

the polyfill is independent and should work in both modes, but if you use JIT then it will reuse the JIT config for translations, and if you use AOT then you will have to add that config (that is not needed without the polyfill in AOT)

[Luke-1988]

Olivier, please, just to clarify:

to today's day and current Angular version (7.1.4) , built-in Angular's feature i18n allows you to translate application into multiple languages only at build time (using AOT). So, if you have for example 3 supported languages (en, fr, de), you must do 3 separate builds and deploy your application into 3 folders:

www.MyApplication.com/en (put en build here)
www.MyApplication.com/de (put de build here)
www.MyApplication.com/fr (put fr build here)

Switching language navigates you to different folder.

The next release, which will include Ivy renderer, will provide rewritten i18n feature, that will allow you to change language at runtime (using AOT). So, you will have to do just one build.

Am I right?

Merci!

[ocombe]

yes exactly, but you'll still need to reload the app if you want to change the locale (once that app has been loaded), because we need to recreate all templates when the language changes

[Luke-1988]

Reload is not that big problem as language specific suffix ( /en /de /fr )

Do you have any release date estimate of this new version? I have an application which is about to be translated, I have began with ngx-translate, bud I found this conversation and question is: If I decide to go with official i18n, how long I will wait for new version.

Thanks again!

[ocombe]

honestly I don't know, every time I try to make an estimation, it's wrong :D
It'll be released with ivy, we try our best to target v8 for the beta which will have a lot of bugs, but I'm not sure if all the features will be in it or just backwards compatibility only (meaning not code translations). Everything should hopefully be stable for v9 in September.

[Luke-1988]

Yes, I have noticed during reading this conversation from 2017 :-D However, that is quite common in open source, no blame here.

So, Sept 2019 is way too late, I would like to launch my app in Feb 2019 so I will continue with ngx-translate (which is, by the way, totally superb cool "works-like-a-charm-out-of-the-box" lib, you have done a amazing job)

[Wildhammer]

have a look at my answer here:
https://stackoverflow.com/a/54293804/2582581

[VVKot]

@ocombe Can clarify when ngx-translate will be deprecated? What features should be available in OOTB i18n to begin this process?

In https://github.com/angular/angular/issues/16477 you mentioned that main pain points(dynamic i18n and code translations) - will be addressed in v9, should we expect depreciation by the end of the year?

[ocombe]

Probably not a deprecation, but it will be like it is right now, I won't be updating the lib, except to make it work with new versions of Angular.

[jasonever]

@ocombe While using ngx-translate, I noticed that it loads the JSON file (for the language) in explicit way.

I'm feeling that it's not good to make my whole application's language visible and combined in one file and easy to be crawled.

Is there any trick to apply here in order to enhance this matter ? or to split the language files ?

[Davilink]

@jasonever

While using ngx-translate, I noticed that it loads the JSON file (for the language) in explicit way.

It's because you use the HTTP Loader (https://github.com/ngx-translate/http-loader), but you can create your own loader that will get the translation when requested/needed in the component see https://github.com/ngx-translate/core#write--use-your-own-loader

Here an another loader (that use firebase):
https://github.com/ngx-translate/core/blob/master/FIREBASE_EXAMPLE.md

[ccjmne]

@ocombe Hello,
I understand I should already be able to use the built-in Angular i18n tooling to translate text in my Typescript code too... and be able to leverage all the good stuff that comes with ICU expressions, so long as I use the JIT compiler ('till Ivy is battle-tested — Angular9).

Is that correct?
I Google'd a bit but couldn't find any procedure for marking my TS strings for translation.
For example, how would I go doing the equivalent of:

<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>

... within my TS code: const siteHeader = 'Hello i18n!';?

[ocombe]

You could use https://github.com/ngx-translate/i18n-polyfill with JIT yes, but it's not the "official" service, just something that can be used in the mean time (and there are a few bugs/missing cases that I won't fix because I don't want to invest more time in something that's going to be deprecated soon)
We will finish the official i18n runtime service once ivy lands for v8 (so it should be merged in one of the minor version between v8 and v9). Most of the pieces are already done, but we need to work on stuff like APIs and such. That being said if you're adventurous and you use ivy, you could use the private exports sooner than that (once v8 is out).

[ccjmne]

@ocombe Aaah, alright, I get it. Thank you very much!

[pathakpradeep22]

I have a quick question, I need to change the language dynamically in the app itself. User will have option to select language. So ngx-translate is the only option as of now? I am using following:
Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.1.10

Please advise!

[VVKot]

@pathakpradeep22 You can use i18n implementation by core team if you will deploy several version of your app, one for each language. So, you will have en.myapp.com, it.myapp.com, nz.myappcom.

If you don't want to do redirects and just update content with one button click - I would recommend going for ngx-translate.

[pathakpradeep22]

@VVKot Thanks for the reply. So in that case ngx-translate suits to me. I am just concerned about the flickering that may happen during language loads(other than english).

[saithis]

@pathakpradeep22 Be aware that ngx-translate has no effect on angulars locale_id. So dates, currencies, etc. may be in the wrong locale after changing the translations at runtime. This is what led to us reloading the app even with ngx-translate.

[Ismaestro]

@saithis Yup, that's exactly our use case.

[userisrashmi]

I am working on an app where i have to use i18n. Could you please provide me the status for i18n in Angular 7

[tmtron]

we gave up on angular i18n and are currently checking i18next - looks good so far.

[fazil1987]

@ocombe it's mentioned in the article here https://www.beyondjava.net/ngx-translate-ngx-translate-extract-internationalization-made-easy that

Maybe it's a bit slower than the "official" approach of the Angular team because ngx-translate doesn't integrate as deep with the AOT compiler than ng-xi18n does.

I dont know what the author mean by ngx-translate doesn't deeply integrate with AOT. when asked I dint get any response from Author, so you being the creator of the lib, is the statement true ? any trade-offs done while AOT compiling ngx-translate

[ocombe]

Everything in ngx-translate works at runtime and adds bindings to the templates: it means that you create a lot of memory pressure since it runs for every change detection cycle.
The code is optimized to immediately return when there is no change (which is 99% of the time), but it still needs to check if there is a change or not.

Meanwhile the official i18n has the advantage to be deeply integrated within the framework. It changes the DOM permanently and never requires a check to see if something has changed (well except for ICU expressions, but that's another story). The text is translated at build time and stays translated (which is why you cannot change the language without restarting the application).

With ivy we will do the translations at runtime but only when the template is created for the first time, which means that there is a very small overhead compared to an app that doesn't use i18n, but it shouldn't be noticeable. Instead of creating the non-translated nodes, the code will delegate that part to i18n, which means that we don't need to create the text nodes 2 times, just once, whether the app uses i18n or not. The perf diff is only for the cases where we need to move/delete the placeholders (divs, spans, ...), but like I said it's only when the template is created for the first time.

[fxck]

@ocombe is there an update on ETA? I remember hearing somewhere that the new i18n will not be included with initial version of Ivy, is that still correct?

[ocombe]

That is correct, and no ETA yet.

[sellmic]

Hi @ocombe

I'm a bit confused,

@suryab21 Asked ...

I am migrating from ngx-translate to i18n and using Angular v7. I would require translation in .ts file at code level in my component where i have no template file available.

Is the translation in .ts file now available in Angular v7?

You answered;

1/ yes you can do that if you use JIT

But then later I think you answered to another question about .ts files that for now we need to use the ngx-translate pollyfill for that?

Just want to be clear;

1. With standard i18n and in JIT mode, can I load translations into templates AND code/.ts files?
2. To do this is Angular 7 needed, or I can stay in Angular 6?

Thanks! And sorry if this was answered before, after reading the whole thread this bit seems a bit unclear to me :-)

[arranHarty123]

Any news on this development? Was it planned for v8?

[ocombe]

It's partially implemented in v8 if you want to try ivy, but it's not completed yet, the runtime service that it supposed to load the translations isn't implemented yet. You can make things work by manually importing the private APIs and loading the files yourself, but it's not at all recommended (basically the low level APIs work and are implemented, but the "polish" isn't there yet, including all of the facade APIs that people will be using). The goal is to finish this once v8 is out officially and add it between v8 and v9 as part of labs (for people to try it out), and then stabilize the API for the v9 release.

[mfp22]

I plan to make a "compatibility" library that will use ngx-translate syntax while using the new angular service under the hood so that you can migrate at your own rhythm. But since the new runtime service isn't designed yet, I don't know if it'll be possible. There might still be some changes to do (like the config).

@ocombe Are you still planning on doing this?

The goal is to finish this once v8 is out officially and add it between v8 and v9 as part of labs (for people to try it out), and then stabilize the API for the v9 release.

I've always been confused. Where do I go to see the Angular Labs projects? Is this already available somewhere?

[vinayak-kaviskar]

@ocombe While using ngx-translate, I noticed that it loads the JSON file (for the language) in explicit way.

I'm feeling that it's not good to make my whole application's language visible and combined in one file and easy to be crawled.

Is there any trick to apply here in order to enhance this matter ? or to split the language files ?

@ocombe Is there any way in ng-x translate to keep several jsons for a particular language, because it becomes cumbersome to keep all translations for a particular language in single json file ?

[SantiagoIlli]

Hi, for those who are waiting for any news related to this issue see this comment by @ocombe

For people waiting for runtime i18n with ivy: bad news, I had to leave the Angular team (budget cuts) and this means that i18n will get less attention.
Pete B. Darwin will work on it part time, but he also has a lot of other priority things on his list (like ngcc).
The current plan is to have translations working with ivy for v9 but only as a build step (like it is right now). This means that it's still going to be 1 build / locale for now, and there won't be code translations (only template translations).

Looks like ngx-translate still is the best choice for now 😕 I'll see what I can do on my free time to improve the lib. I might rewrite it from scratch for ivy because there's a lot of flaws in the current design that would require a complete rewrite to fix, and I think that we can use runtime translations from ivy to do a good part of the work (meaning better perf). We would loose the ability to change the language without reloading the app (or at least the templates), which I don't think it's too big of a deal (and for those who absolutely need this, then the current ngx-translate would still work).

https://github.com/ngx-translate/core/issues/783#issuecomment-512178969

It seems that we will have to wait a little longer before the angular team solves this.

On the other hand, Netanel Basal wrote an article about internationalization. It provides us with a very useful library called transloco.

[suryab21]

Hi @ocombe

I am using i18n translation in my application and there are 2 different bundles one is for English and other is for German language. These bundles are accessible through urls e.g.
www.test.com/en/index.html
www.test.com/de/index.html

I do not want to pass the language/ bundle path in URL to load the specific bundle but want a generic URL e.g. www.test.com/index.html and by hitting this URL based on some API response (where i will get language detail) I want to load specific language bundle. Also, I am not using any server side language to include the bundle files dynamically.

Is it possible to achieve this in i18n where we have different bundle folders? I know passing the language in URL is very common but in my case i want a common URL.

Thanks!!

[pathakpradeep22]

In my case I have used ngx-translate. I have only one bundle. And have
multiple language hain file. And I load them dynamically based on language
selected.
Since you have two different bundle, you will have two different URLs.

If you want to not include language name in url then you should have only
one bundle. And you can use ngx-translate approach.

Hope this helps

On Thu, 14 Nov 2019, 20:04 suryab21, [e-mail] wrote:

Hi @ocombe https://github.com/ocombe

I am using i18n translation in my application and there are 2 different
bundles one is for English and other is for German language. These bundles
are accessible through urls e.g.
www.test.com/en/index.html
www.test.com/de/index.html

I do not want to pass the language/ bundle path in URL to load the
specific bundle but want a generic URL e.g. www.test.com/index.html and
by hitting this URL based on some API response (where i will get language
detail) I want to load specific language bundle. Also, I am not using any
server side language to include the bundle files dynamically.

Is it possible to achieve this in i18n where we have different bundle
folders? I know passing the language in URL is very common but in my case i
want a common URL.

Thanks!!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ngx-translate/core/issues/495?email_source=notifications&email_token=ABPTOVFV5YMYU74L6ZM62CTQTVOY3A5CNFSM4DGGAA4KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEECBAPY#issuecomment-553914431,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABPTOVE7EOTDDVB6B25YKUTQTVOY3ANCNFSM4DGGAA4A
.

[suryab21]

@pathakpradeep22 ....

Thanks for your reply.
The application is very big and at this stage overall implementation of translation cannot be changed. We are looking for some solution with multiple bundles.

[hegedis-andor]

@ocombe hi, some time has passed since the last update of the status of i18n vs ngx-translate, more precisely the dynamic translation. How do you see that option now? Do you think it will ever come to the core? (or did i miss it, and it's already implemented?)

[ocombe]

It will be available with ivy in Angular v9. The only thing that won't be possible is to change the language without reloading the app...

[hegedis-andor]

Thanks for answering.

The only thing that won't be possible is to change the language without reloading the app...

What is the reason behind not making it possible?

[ocombe]

Because angular templates are generated once when the component is first loaded, after that everything is cached. Directives and component can then alter the current state of the view. Changing just the translations while keeping the current state of the view is impossible (because i18n translations in angular core can contain more than just text, ICU expressions for example, or some directives can alter their content after bootstrap), that's why changing the language and the translations require a full reload

[hegedis-andor]

Ahh, i see it now. Thank you for the explanation.

[Ismaestro]

And it would be possible to use with Universal? Also a full reload will be required? I suppose yes...

[ocombe]

I think that universal support is coming later (after 9.0)

[alshaimaaMohsen]

can i use i18n to translate total application language and ngx_translate for runtime pages translation
to take the benefits of searchable content of i18n and basic translation for angulal material plugins?

[eduboxgithub]

@ocombe When you say a "full reload", what do you mean?

"Hard" Reload the page in the browser?
Does Angular have a method to reload the app?

I'm just asking this because we use angular to build our mobile apps with hybrid technology and I'm wondering in what way we need to reload the app to set the new language without shutting it down and opening it again.

I'm seeing/reading this post, because we are working in a new app and evaluating the libs we should integrate in the app. I don't see major developments in this lib and I'm just guessing, like other in this post, if we should use this lib or migrate to the "native" angular i18n.

Some of the requirements we have when using the translations:

• Load local resources (json file, we currently use ngx-translate in all of our apps);
• Be able to add resources in runtime (loaded from server, extending local resources);
• Do translations in code like (TranslateService.instante("SOME_RESOURCE"))
• Do translations in template.
• Avoid complete reload of the app would be a plus, since we are doing mobile development.

Do you have any expectations to improve this lib fix some performance issues?
Something like " | translateonce" to only check translation once and save next checks?

[ocombe]

@alshaimaaMohsen with ivy and v9 you can use @angular/localize to do runtime page translations, you don't need ngx translate at all for that.

@eduboxgithub by full reload I mean reloading the page, with something like location.reload(); or by navigating to a new url (with /fr for example) that would not be catched by the router (not sure if that's possible?).
It "might" be possible to reload the app in ivy by calling bootstrap again, I'm not sure but I think that I heard something like that, but I think that it would not clear the template cache for now... I'll make some tests

Given your constrains, you should consider Angular i18n + my lib Locl to complement it, if reloading the app is not too much of a burden for you. All the other requirements are checked with the new @angular/localize package + Locl and ivy.

[alshaimaaMohsen]

I'm so sorry i can't help you ,I'm new angular developer this is my first
year in angular but i have experience in other languages, i asked my
question full reload because when i used i18n i must reload the site to
make the translation take action ,i don't known other ways
In my site i have two types of pages:
first type (registration,login,forgetpassword,changepassword) which has no
problem with reloading the site
second type (cv content pages) every page i need the user to insert the
data with three languages so i can't reload the site because i don't
know until now how to get the same route .
so i use i18n for the first type because i read that it is more dependable
and make the site searchable more than ngx-translate.
i use ngx-translate for the second type.
i don't know if i will change my translation way in future because i just
begin my first angular project from 3 months.
thank you,

On Mon, Dec 16, 2019 at 7:57 PM eduboxgithub [e-mail]
wrote:

@ocombe https://github.com/ocombe When you say a "full reload", what do
you mean?

"Hard" Reload the page in the browser?
Does Angular have a method to reload the app?

I'm just asking this because we use angular to build our mobile apps with
hybrid technology and I'm wondering in what way we need to reload the app
to set the new language without shutting it down and opening it again.

I'm seeing/reading this post, because we are working in a new app and
evaluating the libs we should integrate in the app. I don't see major
developments in this lib and I'm just guessing, like other in this post, if
we should use this lib or migrate to the "native" angular i18n.

Some of the requirements we have when using the translations:

• Load local resources (json file, we currently use ngx-translate in
  all of our apps);
• Be able to add resources in runtime (loaded from server, extending
  local resources);
• Do translations in code like
  (TranslateService.instante("SOME_RESOURCE"))
• Do translations in template.
• Avoid complete reload of the app would be a plus, since we are doing
  mobile development.

Do you have any expectations to improve this lib fix some performance
issues?
Something like " | translateonce" to only check translation once and save
next checks?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ngx-translate/core/issues/495?email_source=notifications&email_token=AAEXSPZFSMZ54E62SNM4YYTQY66QRA5CNFSM4DGGAA4KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG7RO2I#issuecomment-566171497,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAEXSP3GVFHEG3J2CCESYZDQY66QRANCNFSM4DGGAA4A
.

[sujithgowda]

@alshaimaaMohsen with ivy and v9 you can use @angular/localize to do runtime page translations, you don't need ngx translate at all for that.

@eduboxgithub by full reload I mean reloading the page, with something like location.reload(); or by navigating to a new url (with /fr for example) that would not be catched by the router (not sure if that's possible?).
It "might" be possible to reload the app in ivy by calling bootstrap again, I'm not sure but I think that I heard something like that, but I think that it would not clear the template cache for now... I'll make some tests

Given your constrains, you should consider Angular i18n + my lib Locl to complement it, if reloading the app is not too much of a burden for you. All the other requirements are checked with the new @angular/localize package + Locl and ivy.

@ocombe could you please point to any documentation on how to configure i18n for runtime translation? There is no document in next.angular.io site. Thanks.

[ocombe]

Sure, read this very good article: https://blog.ninja-squad.com/2019/12/10/angular-localize/
It should get you started !
For extraction you can use @locl/cli https://github.com/loclapp/locl/tree/master/libs/cli
If you want to load translations at runtime (instead of using the cli) you can use @locl/core https://github.com/loclapp/locl/tree/master/libs/core (demo: https://stackblitz.com/edit/ivy-ovy4cd)

[sujithgowda]

@ocombe thank you so much.

[ArulRozario]

@ocombe is it possible to have i18n in angular libraries. you mentioned it in one of your talks. If so please suggest some sources for reference.

[ocombe]

You can add i18n to your libraries with the current v9 RC, just add i18n attributes on the template text to translate, and use $localize in your code.
But if you use $localize, your library will only work with ivy (and make sure to add @angular/localize as a peer dependency).
From there, you can either add the translations manually (the current CLI extraction won't pick them up), or use my lib @locl/cli to extract the text to translate.

[karolinatomczak]

It will be available with ivy in Angular v9. The only thing that won't be possible is to change the language without reloading the app...

@ocombe Does it mean that not only template text will be translatable but also dynamically passed messages? I have a variable in the component.ts and displaying it {{ variableName }} in the template. Would this work or would I need to put all the possible text in the template and use some ngIfs to display the correct one?

[ocombe]

yes, code translations work in v9 (what you call "dynamically passed messages"), the syntax is the following:

const text = $localize`some dynamic text in your code with ${variableName}`

[karolinatomczak]

@ocombe Thank you. One more thing, what about splitting the translations files per module? We have a shell app that uses many lazy loaded modules and would need to load only the translations we need. Is it possible with i18n? (When I try to find an answer it always mentions ngx-translate so sorry if it's described somewhere)

[ocombe]

Localize + Locl allows you to lazy load translations with a module when you lazy load a route, I'm working on adding an example to make it easier (and I'll also implement some helpers to make it smoother).
You can extract translations per module with the Locl cli extract tool (meaning that the extraction tool generates one file per module).

[shral]

@ocombe Thank you for the information and your work!
Do you know if, with the currently available version of Angular (9.0.0-rc.13), one can translate a dynamic string (that is coming, let say, from a JSON file)?
(I have many json schema files with descriptions and titles, that are loaded dynamically (that are used for other things too, not only Angular UI, so adding internationalization id-s in there is not really an option in my case)).

[ocombe]

@shral yes, you can do totally do that with just Angular i18n, but you'll need to use Locl to load the translation files at runtime (Angular i18n only allows you to load those at build time for now)...
And you need to load the translations files before you load the module that contains the dynamic translations, so if it's part of your main app then you need to load them before bootstrap, if it's part of a lazy loaded module then you can load them when you lazy load the module

[shral]

Thank you @ocombe for your response!
I'm loading the JSON Schema files only if I need them (for example only on a specific click event), but how can I translate the text that's coming from JSON. I have tried $localize like this:

    Object.keys(jsonData).forEach(key=>{
      jsonData[key] = $localize jsonData[key];  //Hier I'm getting an error.. one of the error is that it needs an `TemplateStringsArray` instead of string but how can I convert a string to 'TemplateStringsArray'?
    })

• How can I translate those files, (I have looked on your demo but couldn't find something that it could help me)?
• So far I can see the function getTranslations() in locl/core is just loading the JSON file, but that I can do with the angular HttpClient module too, why should I use your function?
• In the getTranslations() you are calling platformBrowserDynamic().bootstrapModule where should this function be located, how do you use that when you have a project generated with angular-cli (where the bootstrap is hapening in the bootstrap parameter of @NgModule in app.module.ts?

[pdbruno]

Hi @ocombe , I'm starting a large-scale Angular project from scratch and really want to get internationalization right from the start. From what I've read so far, a combination of $localize, the i18n template tags and the loadTranslations function seems to be the best choice. Are these functionalities going to get long-term support from the official Angular team? Will there be any new official features promoting this way of approaching i18n? Thank you very much for your contribution!

[ocombe]

@pdbruno yes, this is going to be supported like any other official package.
There will be new features, Pete B. Darwin from the Angular team is working on adding more support for runtime translations, and they also need to update the docs.

[saahalbanez]

I need to split a language file into several separate files. It is possible?

[kazeshini178]

You can add i18n to your libraries with the current v9 RC, just add i18n attributes on the template text to translate, and use $localize in your code.
But if you use $localize, your library will only work with ivy (and make sure to add @angular/localize as a peer dependency).

@ocombe What would I need to include in the library setting to allow for this to work? Currently if i add $localize to my library and build I get an error saying Cannot find name $localize.
Cant seem to find what I'm missing

[ranitg]

Localize + Locl allows you to lazy load translations with a module when you lazy load a route, I'm working on adding an example to make it easier (and I'll also implement some helpers to make it smoother).
You can extract translations per module with the Locl cli extract tool (meaning that the extraction tool generates one file per module).

[kazeshini178]

So that works when my module is included in the project and using lazy loading, currently my problem is when the module is external to the main application and lazy loaded in (include into the project as an npm dependency) to allow use to version our modules.
At that point using $localize in the code errors since the polyfill is not includes in the module, and angular doesnt recommend bundling polyfills in external modules.

[sorohan]

@kazeshini178 you can workaround this issue by declaring the $localize global in your library.

export type TranslateFn = (
  messageParts: TemplateStringsArray,
  expressions: readonly any[]
) => [TemplateStringsArray, readonly any[]];

export interface LocalizeFn {
  (messageParts: TemplateStringsArray, ...expressions: readonly any[]): string;
  translate?: TranslateFn;
  locale?: string;
}

declare const $localize: LocalizeFn;

I think the best thing would be if these types were provided in a type package (I've made a feature request and PR for it), so you can just add this to your library's tsconfig:

"types": [
      "@angular/localize"
    ],

[sorohan]

@kazeshini178, there is some info in this issue on a different workaround, for now, to include this where you're using $localize:

import type {} from '@angular/localize/init';

But that will still not bundle the $localize in your library. The application will still need to add the localize import to the polyfills.

[kazeshini178]

@sorohan, didnt even think of just "mocking" the interface that would be available main app. Thanks think that would work for me, will give it a go.

But that will still not bundle the $localize in your library. The application will still need to add the localize import to the polyfills

Thats perfect, and also what I would of expected

[s4m0r4m4]

@ocombe - just wanted to say thank you for this comment thread and all your hard work, this has helped clarify the right path forward for internationalization of my angular application.