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 ***@***.***> 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 <#495 (comment)>, 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 <notifications@github.com> 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 <#495 (comment)>, 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.

[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, ***@***.***> 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 <#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 ***@***.***> 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 <#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?