Angular: [i18n] future 2.x plan

@vicb I have seen a few postings about i18n in the angular repo. How does this relate to https://github.com/angular/i18n? Is this a new initiative?

@thelgevold like most things in ng2, the standalone repos existed for early prototyping. major work is typically done inside of this one.

Hi, there's any document about how it will work?
I'm wondering if I can write keys in markup and normal text in translation files like I'm using with angular-translate.

{{ 'HOMEPAGE__ACTION__SIGNUP' | translate }}

Coding like this, one external person can edit all supported languages (since they reside in JSON/po file, one file per language). If the main language is in the markup, it blocks all revisions until a developer can change the string in the markup code.

Thanks!

@marcalj The (outdated) spec is https://docs.google.com/document/d/1mwyOFsAD-bPoXTk3Hthq0CAcGXCUw-BtTJMR4nGTY-0/edit.

Your use case is supported.

Thanks Victor! Any plans to include number abbreviations? It's something i18n context aware.

@marcalj could you please create a separate issue with more details ? Thanks (but probably not for 2.0 anyways)

Is or will there be support for dynamic translations (loaded from a server)?
Any plans to document i18n in the near future?
Thanks!

The current plan is to generate a binary per locale.

We will work on the doc as the features become available. We should definitely have a minimal doc for the 2.0 release.

What do you mean by "binary per locale". Is the deployed resource file going to be binary little bit like PO/MO where MO is used insted of PO to improve performance. There are also bad examples in binary deployment such as XAML/BAML.

I am not very happy to the current Anguar localization methods. These are the reasons:

• Several different APIs and methods.
• You have to modify your templates so much from original that templates become hard to read and maintain.
• You have to manually update the original resource file and make sure it is in sync with the IDs used in the template

What we really need is

• One single official localization method with solid resource format (XML or JSON based)
• Minimal affect to templates. For example only add "localize" attribute into root element and possible "noloc" attributes into those elements that are not localized.
• Ability to add localization comments to the strings in the templates.
• A tool that scans source code extracting orignal strings and comments into resource file. Use as permanent ids as possible. For example use id attributes or if such is not provided use combination of location and original string value.
• This resource file should be able to store plain strings, strings with patterns ({{...}}), pluralized strings and gender strings little bit like Android's value files.
• Easy way to package localized resources and to download them as needed
• Ability to change language without reload.

I am ready to help if you guys need some help.

@jaska45 most your wishes should come true. One exception: "Ability to change language without reload.". Changing a language will imply bootstrapping a new app.

Thanks. Sound very good. Language change is something that occurs seldom and in that case it is acceptable that some state is lost. Definetely lowest priority in my list and not worth spending too much efforts.

@vicb I'm not sure if I understand this "binary per locale" correctly, but would that mean, that it's not possible to add translations at runtime? We are currently building SAAS with tenant support, where each tenant can extend our system by providing their own set of Form-Definitions and their own set of translations, so in our case it would be really important to be able to add translations at runtime.

The @angular/common DatePipe (date_pipe.ts) currently contains this TODO on line 15:

// TODO: move to a global configurable location along with other i18n components.
var defaultLocale: string = 'en-US';

Is the ability to pass in a locale string to the DatePipe included in the i18n plans for the 2.0 release?

@vicb Our app sets the frontend language once we fetch user object from network after bootstrapping the application. So, did you define if this process of re-boostrapping would be easy?

There's one bit of information I can't find anywhere, just to confirm and be able to sleep at night :)
The official i18n implementation will support gettext/po files, right? That's very common, so I'm guessing it should be available, we won't be stuck with jsons and xtb only, am I right? I mean gettext is so common that it doesn't even need mentioning, it's always there out of the box in any i18n implementation, that's what I'm thinking.

There is no plan to support po for 2.0. You should be able to convert from/to xliff.

sorry for your nights !

What's the thought behind storing strings in XML format? Never ran into any issues extracting to POT and compiling PO to JSON in angular-gettext. It's served us extremely well:

// en-GB.json, cached into localStorage after first request
"en-GB": {
    "Hello {{firstName}}": "{{firstName}}, Gutentag"
}

Random question: any thoughts about translated URLs in the router?

Random question: any thoughts about translated URLs in the router?

@vsavkin what are the plans ?

We are not planning to provide any support for translated URLs until the final is out. We had some ideas on ways to do that after that, but we haven't made any decisions.

ng2 i18n gave me a headache. I was looking for i18n directive in exports :D to no end... Looking through the test specs, and code the lightning struck me:

The template compiler itself will transform and localize the template.

Am I right, that the basic workflow for i18n will be like this:

1. Mark elements with i18n or enclose html parts in i18n comments.
2. Run somehow the extractor (ng cli?) to produce xliff.
3. Pass that to translation and receive back the translated binary.
4. Configure angular at bootstrap somehow to use the wanted language binary file.
5. The template compiler itself will transform and localize the template.

Because if it is, for the time being I will use a custom "i18n" directive to mimic the very-very basics of translation until 2.0 hits.

Is this the intended workflow for i18n in angular2 in the future?

@concept-hf that is right, see the doc that I linker earlier in this discussion.

You'll run ng-xi18n to create the xliff.

We have a couple of directives and filter for ICU messages

@vicb Will be available in the upcoming RC5? :)

Depends on when RC5 is... otherwise will be in RC6

What version of XLIFF will be supported? 1.2 or 2.0 or both?

does text message extraction from html templates like angular-gettext features supported by angular 2 core?

• Will be in RC6,
• xliff 1.2 for now.

does the "i18n messages" part mean ng2-translate will become unnecessary and Angular will provide all the tools we need for using translation strings?

if i only need {{ 'TRANSLATION_ID' | translate }}, could i use now? (rc5)
and how to import it

@vicb That is GOOD NEWS!! Thanks all for the hard work guys, love angular 2!

Any plans to support json (none-xml) message format?

does the "i18n messages" part mean ng2-translate will become unnecessary and Angular will provide all the tools we need for using translation strings?

the goal is to have i18n built-in. Not sure what features are covered by ng2-translate though.

if i only need {{ 'TRANSLATION_ID' | translate }}

The syntax is <p i18n>TRANSLATION_KEY</p> / <p i18n>test in src lang</p>. See the doc linked in one of the first comment on this thread

love angular 2!

me too !

Any plans to support json (none-xml) message format?

Not for now. You can create a feature request and we will evaluate according to the interest the issue gets.

For a very large application, having a single file (xliff) per language could affect load times. Is there a way to break up the language file into smaller files? If yes, will it be manged using NgModules (0..1 xliff per NgModule)?

having a single file (xliff) per language could affect load times

In AoT (compiled) mode, the translation file is not loaded as the template are compiled to the target lang. This would only be true in JIT (runtime) compilation.

Please also create a feature request if you need this feature. Thanks.

@marinho ng2-translate has always been (and will always be) a minimal way to translate your application. It is very flexible and works at runtime (no page reloading to change the language).
The i18n implementation of angular 2 requires more work, but is probably a lot better for big (enterprise) applications, it will support pluralization, genders, auto extraction of strings.

If the i18n implementation covers all that ng2-translate already does then I will deprecate it, otherwise I will try to import some of the tools from i18n to ng2-translate (a xliff loader for example) and focus the library on what i18n doesn't do

with RC-6, are the tools available yet to do the auto extraction of strings? If so, please point me in their direction - along with any docs to go along with it.
_Update_: I see there is a new blog post about RC6 that mentions the new auto-extraction tool (ng-xi18n). Are there any docs to go along with it?

not yet, I just started working on them :)
you can use the ng-xi18n tool just like ngc: add a script in your package.json that does "ng-xi18n"
example: "extract": "ng-xi18n" and then run npm run extract, it should create a file messages.xlf with your strings to translate

Hi,

• when I execute the ng-xi18n script, it cannot find the resources when using an absolute path.
• is it possible to use i18n with interpolation ?

Regards.

when I execute the ng-xi18n script, it cannot find the resources when using an absolute path.

When you give a path to the command I think that it will look for the tsconfig.json file, or use the default parameters otherwise (and probably fail miserably). Not sure though, the author of the tool is away for some time which means that I haven't had any real intel on the stuff :)

is it possible to use i18n with interpolation ?

As long as you use the directive on your elements, it should work. Do you have an example in mind ?

For my first question: it is not really a problem as I think it's better to use relative paths.
For the second: I need to iterate overate a list of keys (KEY_A, KEY_B, ...) and to display the related translation of thoses keys. I tried to put the i18n attribute on my element, but the script created the following xlf trans.

<div *ngFor="let k of myKeys" i18n>{{k}}</div>

<trans-unit id="fdbc61d14108f805b0c5234d1af631b8a03f8001" datatype="html"> <source><x id="INTERPOLATION"/></source> <target/> </trans-unit>```

Ahh I get it. I think it only works with static text, not variables

please direct support question to external lists and keep GH for feature requests and bugs

how to get i18n string in script?
for example:

let _THIS_IS_A_I18N_STRING = ???
alert(_THIS_IS_A_I18N_STRING);

I don't think it is possible, like I said before it only works with static text, it won't parse text on the js code, only templates

I'm using $translate.instant('KEY_FOO_BAR'); a lot... there's a lot of use cases about using it outisde a template.

@zh99998 @marcalj This is not possible with the current impl. Could you please create a proper feature request in the issue tracker filling out the issue template and adding use cases (and link to other implementation if applicable).

Thanks.

Please also link the feature request here; I'd like to second it.

Regards

@vicb @db6edr https://github.com/angular/angular/issues/11405 Thanks! :)

I was wondering how i18n would work with localized UI / Component packages?

Let me explain our situation:
We are creating UI components as (feature) NgModules which we publish to an internal npm registry. Then, one level up, the actual app (possibly for a specific customer) would install those modules and reference the component. Now, since localization is currently done at app level, we would have to merge xlf files from the feature module with the app module and provide the merged XLF as TRANSLATIONS.

Specific example: Our authentication module provides an AuthenticationComponent that shows a login button which has to be localized ("Login", "Anmelden", etc.). Ideally we would like to provide a messages.us.xlf, messages.de.xlf, and so on with the npm package that ships AuthenticationComponent. The main application therefore would have to merge those xlf files and use it to bootstrap, because only a single TRANSLATIONS value can be provided (correct?).

In AOT mode, this means that ngc creates ngfactory files for every feature module. Is there a way to package localized ngfactory files in npm and have the compiler reference the localized ngfactory files when calling ngc for the main app? Compiling all dependent templates in every app for every language seems somewhat intense.

Thanks!

@paumayr we haven't it this use case yet but that is definitely something we need to cover.

It means that for 2.0 final you'll have no other option than creating a single file.

However please create a separate feature request describing your needs and we will take a look for further releases.

thanks

Are there any guides / best practices yet for workflows on how to work with XLIFF? I created this Stack Overflow question for this, but didn't receive any answers. I am wondering because I come frome a .po background and just can't find a single good tool (like Poedit) to fit my needs (update messages.LANG-lang.xlf files from messages.xlf for example).

Also: are there any options for ng-xi18n about the extraction location? I want to have a separate folder to store my localizations in.

And last but not least: are we really supposed to manually create a messages.LANG-lang.ts file for each messages.LANG-lang.xlf file, or will the .xlf file eventually be parsed automatically (for JIT, especially for development purposes)?

there is a command to update xlf files for each language :)

Are there any guides

@ocombe is working on some docs

I come frome a .po background

Create an issue if you need more format - we will evaluate based on issue popularity.
In the interim you should be able to convert po <> xlf ?

are there any options for ng-xi18n about the extraction location?

not for now, create an issue if needed

will the .xlf file eventually be parsed automatically

you don't have to do anything manually.
ng-xi18n is used to extract,
ngc is used to merge.

Docs is lagging behind for now but @ocombe is working on it.

to come back from holidays :D

which dev, what holidays ?

Thank you very much @ocombe and @vicb for the quick response. I am really looking forward for the docs. Keep up the excellent work :)

@vicb ok, will do. I think that this are two separate issues: one is supporting multiple TRANSLATIONS providers (possibly on an NgModule level?), the other is referencing localized external ngfactory.ts files in ngc. I will open a feature request to supporting multiple TRANSLATIONS. The AOT issue with ngfactories shipped in npms is a dev-time improvement.
thanks!

From what I can see in StephenFluin's i18n sample, localisation is done at app bootstrap time. I need to be able to change the language at any time while running the app which this approach seems not to allow. Is there any other mechanism, either present or future, that would allow for dynamically changing the app's language at runtime.

@ckemmler as @vicb mentioned above in this thread (https://github.com/angular/angular/issues/9104#issuecomment-229975293), an app restart is required to change the language, as the compiler inlines the localized strings into the ngfactories / compiled template code.

And it makes sense, when the user changes the lang it's because he doesn't understand the current one, so reloading shouldn't be too much of a problem.
Also you're supposed to detect the lang to apply based on the user browser language, in most of the cases the user should get the correct language at first load

Thanks @paumayr. Sorry I didn't see that. Really? I understand that localisation can sometimes be tricky but having to start the app anew is kind of a deal breaker, don't you think? And definitely not the kind of behaviour that people have grown accustomed too from using websites. Granted, Angular is about apps, not websites, but still: most web -apps nowadays are indistinguishable from web -pages anyway and requiring the user to do something as disruptive as restarting the app just to change the language is unacceptable from a UX perspective, at least in my book.
I mean: imagine a travel website where you think you'll understand everything fine using whatever language is active in the current locale, but after painstakingly going through your 3d form, you find that you need a particular fine print sentence in your mother tongue and bang! you have to "restart the app", read -> start everything from scratch again?

Also can you then clarify what "runtime compiler" means in the top-most post (under "Features planned for 2.0:")? Thanks!

Reloading the app doesn't mean starting from start, you can keep the same url and reload at the exact same state

@ocombe you're right :-)

@ckemmler I think your "3rd form page" example is something that users have painstakingly learned the last few years: You don't just switch a language, because it might loose your state... And you better hurry up before your 20min session timeout is over... So no, this is not the deal breaker to me. What I am a bit concerned about is build time for all languages (ngc call per culture).

One more thing, I see ng-xi18n being mentioned in a few places. Where is it's usage documented? I googled it but didn't find anything.

@ckemmler I think it's still WIP. I am yearning to finally study it :)

@paumayr it shouldn't add much to extract the text strings, I don't have any benchmark but it seems faster than a simple tsc
@ckemmler nowhere yet, should be documented soon (if I can find the time to finish the docs :D)

@ocombe where will we find the documentation once it's finished? Can we expect it to appear at angular.io? Because I check the docs daily, so I don't have to fetch information from other channels whether it got released or not

yes it will be on angular.io, I'll add a message here once it's available

Please stop using this channel for general discussions and support requests.
It should be for bugs and feature requests only.
The less noise we have to filter the more productive.

Thanks !

@christiandreher @fank @ckemmler @marcalj @dagerber @esinek my PR for the documentation on i18n is available here: https://github.com/angular/angular.io/pull/2309
⚠️ it is still a PR pending review and the content will change, but if you really need the doc right now you can read it

@ocombe thank you very much for the heads up!

Nope it's not.

Use gitter and StackOverflow

The ability to change languages without reloading is crucial for using i18n in AngularJS. Reloading is not Angularonic. The whole UX in Angular is of a single page. Current i18n implementation (with reloading) breaks SPA principle.

contributions are welcome !

@anderflash i don't really agree with your assertion that reloading is crucial with this i18n implementation.

There is still some implementations (ng2-translate, ng2-i18next to a lesser extent) based on directives that are able to change language at runtime. But this has a real cost at execution, because language has to be checked at every change cycle (as far as I can understand)

I can see this i18n implementation as a static way to handle translations. I can not see a lot of situations where the user want to change language during using an app. The crucial thing for me instead is the detection of the language at bootstrap (or even compilation) time: the user should not have to change the language because of a wrong initial choice.

@anderflash I'm sure everyone would like to see an app (web or otherwise) instantly updating on a language change, without reloading the page / rebooting the app. Me included (maybe I've even requested this myself at some point, not sure). But the more I think about it and the more I look around, the more I realize that it's not that feasible and I tend to agree with the rest of the world :)
If the user does 1,000 things in your app, only 1 of these being "changing the language", we'd rather have maximum performance on the other 999 things without sacrificing any bit of performance for that 1 thing.

Even if we disregard developing "cost"... if there is any performance downside to that, we really have to weigh things:

1. How often does a user need to change the language?... I'd put my money on once at most, if the developer himself/herself doesn't nail it from the beginning! But even if I'm wrong here (by 1), I still can't imagine a case when a user would need to change back and forth between languages.
2. More often than not, in an app, you'd also have content from the server. So, changing the language would also mean updating content on your side of things. This being the case, even if Angular's i18n solution would offer that, when it comes to my part (updating content already delivered from the server), I'd definitely tell the client we need to reload the app :) Either that, or the clients themselves would say "oh, okay... just reload the page" after I inform them about the cost difference.

Also, take a look at native apps (iOS, Android, Windows) that implement i18n. Even then, the app usually has to be restarted after a language change (unless it's a pretty simple app). The costs for "live language change" are simply too high in most cases (either performance or development wise)

It seems interesting to look at the Android way to handle such cases.
As a matter of fact, Android apps are isolated activities (components) which can be reloaded in certain circumstances: screen rotation or ... language change.

In these cases, all the activity is recreated from scratch, with the help of data cached by the activity in anticipation of this event.

To make a parallel, it sounds acceptable to me to handle the same event the same way. And it seems possible with the help of the router and some other data cache (localStorage ?) to be able to restart the app without loosing the context.

@MrCroft

a user would need to change back and forth between languages.

I this case it would be easier to open 2 tabs (one for each language)

sorry @vicb for another comment...

the advantages are described here:
https://github.com/IdeaBlade/angular.io/blob/b3e44c88dd8cd6b37da64e56d275e058314922fd/public/docs/ts/latest/guide/i18n.jade#L67

One my extra experience is that 3rd party services like Google Maps API, FB plugins can't be changed at runtime, or without obstacles like reloading of JS scripts etc., so page reload is mostly necessary and easier.

yeah, the downside is the necessity of server side support...

@christiandreher @fank @ckemmler @marcalj @dagerber @esinek the cookbook for i18n has been release on angular.io: https://angular.io/docs/ts/latest/cookbook/i18n.html

@ocombe I'm new to web and angular, how do you reload the app at runtime ?

Any plans for making ng-xi18n work for ES6 modules, so far I only get an "empty" messages.xlf?

Sorry, but how do you do this? The cookbook says you have to copy files manually...
https://github.com/angular/angular/issues/9104#issuecomment-245337147

@yandreiy I think this is not possible at the moment, just read some comments above ;)
@select Did you define the i18n HTML attributes in your elements? only tagged texts will get extracted!

PS: I wrote a blog post about the i18n workflow for Angular 1 & Angular 2

I have 2 modules: my main app module AppModule and a SecondModule which I import directly in my AppModule (so, it's not a lazy loaded module - if that would make any difference, but I don't think it does).

In the app module I want to use a component from SecondModule, so in my SecondModule I have:

exports: [ SomeComponent ]

(no sense to make a shared module for that, plus I'm not sure it would fix this, though I haven't tried).

Now, SomeComponent is available for use anywhere in any template of any component of AppModule.
But running ./node_modules/.bin/ng-xi18n -p src/ fails with: Cannot determine the module for component SomeComponent!

Here's the complete log:

$ ./node_modules/.bin/ng-xi18n -p src/
Error: Cannot determine the module for component SomeComponent!
    at D:\wamp\www\bs\pdp.ng2\node_modules\@angular\compiler-cli\src\extract_i18n.js:101:27
    at Array.map (native)
    at D:\wamp\www\bs\pdp.ng2\node_modules\@angular\compiler-cli\src\extract_i18n.js:97:52
    at Array.map (native)
    at Extractor.extract (D:\wamp\www\bs\pdp.ng2\node_modules\@angular\compiler-cli\src\extract_i18n.js:95:28)
    at extract (D:\wamp\www\bs\pdp.ng2\node_modules\@angular\compiler-cli\src\extract_i18n.js:16:35)
    at Object.main (D:\wamp\www\bs\pdp.ng2\node_modules\@angular\tsc-wrapped\src\main.js:30:16)
    at Object.<anonymous> (D:\wamp\www\bs\pdp.ng2\node_modules\@angular\compiler-cli\src\extract_i18n.js:160:9)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
Extraction failed

Should I open an issue for this, is it a bug? Or do I need to have a different approach here?

I've summarized our automatic workflow for i18n on my blog
It does everything automatically, like copying files, merging with existing translations, etc.
Hope this helps.

@MrCroft having precise same issue...

@MrCroft @spock123 When you have an issue please create a new ticket. First you are polluting this one and then we do not pay attention.

That being said your problem should have been fixed by the latest commits in the offline compiler and the extractor - there should be a release in the coming days for you to try.

@vicb I have been reading all of the i18n docs and am very excited about the AOT direction.

One thing I cannot find is now to translate attribute text. For example

<img src="icon.png" alt="This Text should be Translated!" />

Have I just missed this in the documentation, or should I open a ticket about this?

Thanks.

@martinmcwhorter i think you just have to add an attribute i18n-alt

@actimeo That seems to work. I've tried with
<input type="text" i18n-placeholder placeholder="Who do you want to find?"/>

This is documented... in a pending PR https://github.com/angular/angular.io/pull/2740

I'll push to have it merged soon /cc @wardbell @Foxandxss

We are not planning to provide any support for translated URLs until the final is out. We had some ideas on ways to do that after that, but we haven't made any decisions.

Any progress on this? A way to link to these translated routes is also needed.

Hi guys, it seems that with Angular i18n we can only translate texts in views. But what about messages embedded in the code? Something like:

throw new Error('This request has failed')

How can I translate this?

I presume you intent the error message to the user in the view. In this
case include a code with your thrown exception and map this code to a
message in the template of an error handler component.

On Mon, 12 Dec 2016, 15:04 Daniele Ghidoli, notifications@github.com
wrote:

Hi guys, it seems that with Angular i18n we can only translate texts in
views. But what about messages embedded in the code? Something like:

throw new Error('This request has failed')

How can I translate this?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular/issues/9104#issuecomment-266453448,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI5-kyVvBnng0jPTwvP3ZdHzumtHERYks5rHWKQgaJpZM4IxhKY
.

Yes, but not only error messages. Any string that can be hardcoded in the code and is not present in the view. The old ngTranslate library for Angular1 has a $translate service that you can use for translating a string from a controller and then use it later. Should I have to move all the messages in the view? or there will be another way?

The plan is to be able to translate strings in TS - there is an issue tracking the feature in GH.

@vicb Could you please post a link?

@ghidoz I've faced the same issue at work and coded a somewhat hackish workaround:

• There's a Notification component, which handles the entire display mechanism.
• I've added a Notification instance for every error/warning/info situation the application supports
• Each instance has the appropriate localized texts inside and is triggered using *ngIf and/or *ngSwitch, depending on what suits better

Thanks @db6edr, I got the point. But it's not always possible. For example, I need to translate also web notifications, that haven't a view where I can put all the possible texts.

@vicb any roadmap for that? Thanks

@feloy Earlier, you wrote "The crucial thing for me instead is the detection of the language at bootstrap" So if the locale is Canada, do you load English or French; if the locale is Belgium, do you load Dutch, French, or German, if the user is in south Texas, do you load English or Spanish? I'm not even going to Switzerland or India, or talk about immigrants in many countries - you get the point, I hope. A real user need exists to change language after the app loads. Angular 2 should support that need if you expect to be used globally. Once the language changes, I see no need to check it in each refresh cycle. Give the user a message that language change will "take a moment" when the change event occurs. When the user leaves the app, that language should be stored in a cookie and it should load with that language the next time. That is the best guess at the user's preference.

Hi @mLaird I'm talking about languages, no countries, exactly like you. Each browser gives the possibility in its preferences to define the preferred language of the user. So if a texan user defines its preferred language as es_US he would get a spanish UI as expected.

any roadmap for that? Thanks

I'll try to take a look at what's needed e/o this week and come with a plan.

@Philippe MARTIN Yes, that is possible, but you are dealing with more
technically savvy customers than I am ;-) Then there are the transient
users - users at libraries, users at a friends house, users at an airport
kiosk, etc., etc. They often have a different language preference than the
browser setting.

On Tue, Dec 13, 2016 at 3:06 PM, Victor Berchet notifications@github.com
wrote:

any roadmap for that? Thanks

I'll try to take a look at what's needed e/o this week and come with a
plan.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular/issues/9104#issuecomment-266846439,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADDSb05rHEK1RipS1btty5TFsQAwiE1Mks5rHvqygaJpZM4IxhKY
.

--

Mike Laird

12 Arbor Creek Drive, Pittsford, New York 14534
[email protected]

". . . remembering on both sides that civility is not a sign of weakness,
and sincerity is always subject to proof. Let us never negotiate out of
fear, but let us never fear to negotiate." - John F. Kennedy

@mLaird please have a look at my implementaion. You can override default language by rebootstraping the app with the new language as argument. That sounds reasonable to me.
https://github.com/actimeo/simmage-ui (see live demo)

I found a problem with plurals and select: are you sure it is correctly implemented?

If I have just normal string, I can export them with the ng-xi18n command, but if I add a string with plurals or select, it does not work.

Using

<span i18n>{user.receivedReports, plural, =0 {No spam/scam reports} =1 {One spam/scam report} other {# spam/scam reports}}</span>

and

<span i18n>{currentConversation.user.online, select, true {Online} false {Offline}}</span>

I get many parsing errors like this:

Unexpected closing tag "li" ("plural, =0 {No spam/scam reports} =1 {One spam/scam report} other {# spam/scam reports}}</span>
    [ERROR ->]</li>

Using the comments syntax I get no error while extracting:

<!--i18n: select test-->
{user.online, select, true {Online} false {Offline}}
<!--/i18n-->

<!--i18n: plural test-->
{user.receivedReports, plural, =0 {No spam/scam reports} =1 {One spam/scam report} other {# spam/scam reports}}
<!--/i18n-->



md5-b6643fed0ae53c51b5e311fa11670548



<trans-unit id="2b10577df0a3d78b7e65c07d5760524f881f390a" datatype="html">
    <source>
        <x id="ICU"/>
    </source>
    <target/>
    <note priority="1" from="description">plural test</note>
</trans-unit>

<trans-unit id="e61681024eadd7f72e33f053f04c128910c419a2" datatype="html">
    <source>
        <x id="ICU"/>
    </source>
    <target/>
    <note priority="1" from="description">select test</note>
</trans-unit>



md5-1ed6d3f87b24b5bd78093a4ca13431c4



<msg id="3c8aef599bb96e303600aa44617acd0a7d602147">{user.receivedReports, plural, =0 {No spam/scam reports} =1 {One spam/scam report} other {# spam/scam reports} }</msg>
<msg id="06fe711b55463e3ee28d72239d77e9a50da62d86">{currentConversation.user.online, select, true {Online} false {Offline} }</msg> 

how to translate Date/Time ?

The date is translated using the date pipe

On Wed, 4 Jan 2017, 08:12 zh99998, notifications@github.com wrote:

how to translate Date/Time ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular/issues/9104#issuecomment-270315783,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI5-gHZiWOREPwucdqwRhVIs9xwMgorks5rO1RngaJpZM4IxhKY
.

@feloy , your example only let's you switch the lang on the login page, what if you want to switch the lang when logged in, and without a browser refresh? How to manually destroy the application and bootstrap it again?

@dietergeerts that's only possible with JIT, not with AOT.

@rolandoldengarm , it's also possible with AOT if you load your translations on application load. I'm currently using something in between ngx-translate and the official i18n, in the sense that we use pipes to get the translations (pure ones), but we only load one language at startup, and switching the language requires a reboot of the application (If only we had routing reload, as the i18n setup is done in one of the root resolves)

@vicb

I'll try to take a look at what's needed e/o this week and come with a plan.

Do you have any updates on the roadmap? Specifically for an i18n implementation for translations outside of templates.

I am also very interested in the capability to translate strings in TypeScript. Any ETA on this?

@Thomas-Kuipers @thelgevold I'm working on it, and it will be available in 4.1 or 4.2 (most likely)

@ocombe
how to deal with static text in interpolation, which can't use select translation.

<div i18n>{{exercise._desc ? exercise._desc : 'empty'}}</div>

string 'empty' can't be translate

@rayer4u this is not the subject of this issue, for support questions you should use stackoverflow or gitter.
I'll answer this one anyway, but don't ask further questions here that are unrelated to i18n future plans please.

The answer is: you can't do it, dynamic translations are not supported by Angular i18n since it works at compile or build time, and not at runtime.

Off Topic: I Apologize
@rayer4u The solution is to use static translations:

<div *ngIf="exercise?._desc">{{ exercise?._desc }}</div>
<div *ngIf="!exercise?._desc" i18n>empty</div>

@ocombe I Apologize for off Topic, no need to reply. I just have this need and can't find any quick way to discuss it. I think this may be concerned by angular i18n plan. As Angular i18n plan don't deal with interpolation, a extra mark/find/replace is better build time i18n solution for me right now.
@martinmcwhorter Thanks for your reply. We write a lot mixed if/else logic to output diffrent i18n text in template, this is the easiest one. Maybe put runtime text logic in template is a bad choice.

maybe this is bad idea but can't angular add automatically @@id in our i18n attributes when we extract first time ?

No because we would have to maintain this when you edit the code.
Let's say that you have two blocks of i18n code that are the same, we add the ids, and then you change one of them, the ids don't match which means that the next extraction will skip on of those...

I confirm it's bad idea, can you explain how angular know to attribut same id to string when we extract again and again, how they keep same ID on string. so powerful but I don't undersand :s

@ocombe

This is what we use: https://github.com/angular/angular/blob/master/packages/compiler/src/i18n/digest.ts#L13-L15

We are now at v4 so I'm closing this issue, please follow up in #16477 for our plans for v4 and beyond.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}