Angular-cli: [Discussion] angular-cli and i18n (ng-xi18n + ngc)

[ghost]

With angular's i18n working quite good now, I wanted to start a general discussion about how the angular-cli will be supposed to work with it.

According to this statement on StackOverflow from @Brocco, angular-cli will eventually make use of AOT compilation. This means, that ngc will be used, which in turn will respect xlf files for translations. For JIT builds (development builds), we could make use of a raw webpack loader, which loads a xlf file as string and provides this as translation.

Here are some questions which come to my mind and I think need to be considered in future development:

• Currently, for a production build, everything (vendor's code + application code) is bundled into one single bundle.js file. With multiple translations, will we be supposed to have one complete bundle for each language? This seems to be a very inpractical approach. Bundling every translation into the bundle.js is not practical either, as in maybe 99% of all cases, one language is sufficient. Imagine a popular app, built with angular, which is used from people all over the world. We 1) don't want to ship a bundle.js containing all possible translations, because eventually they will blow up the bundle size. We 2) don't want to have hundrets of bundles, each for one language. Maybe it would be good to split the bundle.js into two separate bundles: 1) vendors library code, 2) NgFactory code. For each language, a dedicated ngfactory-bundle.lang-LANG.js would then be created.
• What about libraries that support localization? For example a library which supplies some input components (like a calendar) which needs to be localized.
• How can we reliably detect the language and load the app accordingly? At the moment, this has to occur during bootstrap, but what about detecting the browser locale or maybe the users preference (this means: much later than bootstrap time; after a database request, fetching the user settings after auth)?
• As ng is a façade: would we need an ng i18n command to hide the possibly rather complex ng-xi18n call (regarding hiding passed parameters... a call could otherwise look like this: ./node_modules/.bin/ng-xi18n -p src/tsconfig.json ......)? Or could this be automated with some kind of watch (I don't think so, as ng-xi18n takes some time to complete, even with a small app)?
• Where would we store the localization files? Maybe src/i18n/ would be a good place for the start. If we would like to encourage a set of localization files for each module, it should be located at src/<module-name>/i18n/ or maybe src/i18n/<module-name>/. The latter approach would be better for translator-teams, or translation-tools I think

[elvirdolic]

As we have now AOT in angular-cli the question is how we can use i18n with aot and CLI? At the moment I don't see the possibility.

@christiandreher already said this is a common case for apps to support multiple languages and I think it would be a great experience to have this in CLI to make the experience complete or at least some instructions how that can be achieved outside of CLI magic blackbox.

[filipesilva]

This is something we'd like to have, but there's still a fair bit of architecture discussion around it that we need to do before getting to it.

[mbeckenbach]

@elvirdolic That would be great for the moment.

least some instructions how that can be achieved outside of CLI magic blackbox.

[rolandoldengarm]

I've got a fully automated set of gulp tasks to create XLF files, merge to translation files, etc. Please see my blog: http://rolandoldengarm.com/index.php/2016/10/17/angular-2-automated-i18n-workflow-using-gulp/
Only tested with JIT, but I think it will work for AOT as well.

[kemsky]

Is it possible to use i18n with angular-cli now?

[rolandoldengarm]

@kemsky yes, we're using i18n + Angular CLI.

[jfmaeck]

@rolandoldengarm are you using i18n + Angular CLI + Ahead of Time Compilation? If so, I would very much appreciate any hints on how to get this working.

For people struggling with i18n + Angular CLI: It took me a while to figure out the correct way to call ng-xi18n (although it is mentioned in this issue's description, actually):

./node_modules/.bin/ng-xi18n -p src/tsconfig.json

Or in package.json:

  ...
  "scripts": {
    "i18n": "ng-xi18n -p src/tsconfig.json"
  }
  ...

[rolandoldengarm]

@jfmaeck just scroll up a bit... https://github.com/angular/angular-cli/issues/2201#issuecomment-255572851

[kemsky]

@jfmaeck, thanks for tsconfig.json tip.

@rolandoldengarm, it works in JIT mode, but in AOT bootstrapModule is replaced by bootstrapModuleFactory automatically, i see i18n providers are passed but localization does not work.

[serhiisol]

@jfmaeck With this option i got this message

Error: Error Unknown compiler option 'include'.
    at check (/Users/serhiysolonko/Development/monorepo/website/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15)
    at Tsc.readConfiguration (/Users/serhiysolonko/Development/monorepo/website/node_modules/@angular/tsc-wrapped/src/tsc.js:66:9)
    at Object.main (/Users/serhiysolonko/Development/monorepo/website/node_modules/@angular/tsc-wrapped/src/main.js:17:28)
    at Object.<anonymous> (/Users/serhiysolonko/Development/monorepo/website/node_modules/@angular/compiler-cli/src/extract_i18n.js:46:9)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
Extraction failed

[jfmaeck]

@serhiisol I am not sure but perhaps there is something wrong with your tsconfig.json file? The include section should be a sibling of compilerOptions. Perhaps it is a descendant in your tsconfig.json? If not, unfortunately I have no other idea.

[cladera]

I opened this issue angular/angular#12749 yesterday. @vicb asked to open an issue in CLI's project but I came across this discussion. Is it related or should I open a new issue anyway?

[serhiisol]

@jfmaeck yes, you're right, but previously include was a descendant.

@cladera I don't think you should, as @filipesilva mentioned, they have a lot of things to discuss/design first, before adding it to CLI, imo.

[cladera]

@serhiisol ok!

For those dealing with the same issue, @kemsky's workaround works. When importing a sass partial use the full file name.

Example:

@import "variables.scss"
@import "_partial.scss"

Instead of

@import "variables"
@import "partial"

[serhiisol]

in my case it won't work, cause I have a bunch of component-based sass files, which import 3rd party sass files and if I'll specify exact path to the file, compiler won't compile my project :(

for example:

ERROR in ./src/app/shared/toggle/toggle.component.sass
Module build failed:
@import "/node_modules/custom-theme/sass/_colors.sass"

[serhiisol]

So, right now I can't make ng-xi18n working, so I built simple script which searches for all html files in src folder and then creates Xliff (for instance) file at the end using angular compiler (@angular/compiler):

Gist

That's pretty it, I hope this will help you =)

p.s. If anyone knows how to make ng-xi18n working with cli, please, let me know how =)

[crain]

I have the same issue as described in #2814. This issue was closed in favour of this one. It looks to me that people experiencing other issues as described in #2814. If I am wrong, how does it relate to this issue?

I am bit confused if calling ng-xi18n should work with cli setup projects? Or it does not and we need to wait for the cli support?

[vicb]

To wrap the message extraction, the CLI should provide a cmd that does https://github.com/angular/angular/blob/1bd858fb436257454f56602c3673d74be02d22e9/modules/%40angular/compiler-cli/src/extract_i18n.ts#L36-L61 with a resource loader with SASS support.

[shaneog]

AOT + i18n is currently not at all possible with Angular CLI. 😢

[rolandoldengarm]

@crain ng-xi18n works fine for me. The only caveat is that you have to copy the tsconfig.json from /src to the root folder.

[tdesmet]

To run ng-xi18n I just remove the imports from my scss files and add them back after the messages have been extracted It is a bit of a hassle that I have to do this, but since I'm not generating the messages every day I can live with it for now.

As for AOT + i18n: I made a PR https://github.com/angular/angular-cli/pull/3098 to expose the i18nFormat, i18nFile and locale options of the angular compiler. With that branch I can build my app with AOT and have it translated.

The only downside is that you have to run the build command for every locale and you get a bundle for every command. For now I just deploy each bundle in a separate directory and redirect the user according to his browser language or a cookie from a previous visit to the correct directory/locale.

[ymlsam]

is there any working example to enable AOT + i18n with angular cli?

[rolandoldengarm]

@tdesmet Good stuff! Any chance you are able to share a working example with AOT + i18n, or a blog post how to do that?
Right now we're using i18n without AOT and it's very slow (bootstrapping takes about 10 seconds), AOT should fix that.

[rolandoldengarm]

@sayedrakib please don't hijack this Github issue, furthermore this is a support question.
And angular CLI doesn't use SystemJS anymore at all.

[vicb]

As discussed in https://github.com/angular/angular-cli/issues/3314#issuecomment-263658080, the CLI needs to have a command that wraps ng-xi18n in order to be able to extract the strings.

The CLI team will not have bw to work on the command before early next year but can help someone writing a PR.

[rolandoldengarm]

Maybe I'm missing something, but that should be relatively straight-forward, right? Just add a command "ng i18n" which runs ng-xi18n? Or is it more complicated?

[vicb]

Just add a command "ng i18n" which runs ng-xi18n ?

If executing ng-xi18n fails, there are little chances that a command wrapping it would succeed.

You at least have to create a resource loader and instantiate an extractor. It should be very similar to what is done in the build phase - I don't know the CLI well enough to give more info but if someone is willing to work on it, we'll find somebody that can help better than I can.

[rolandoldengarm]

If executing ng-xi18n fails, there are little chances that a command wrapping it would succeed.

You at least have to create a resource loader and instantiate an extractor. It should be very similar to what is done in the build phase - I don't know the CLI well enough to give more info but if someone is willing to work on it, we'll find somebody that can help better than I can.

ng-xi18n fails due to the fact that the tsconfig.json is not in the rootfolder, but in /src. The only solution I found so far is to copy the tsconfig.json to the root folder.

[vicb]

ng-xi18n -p /src

[rolandoldengarm]

Ah @vicb that's great! It's not documented though, is there already an issue about this?

[vicb]

nope, please open one on angular/angular.io. Thanks

[wardbell]

OK. Coming in PR https://github.com/angular/angular.io/pull/2740

[cladera]

Pushed a PR #3340 as @vicb suggested. It just wraps the extractor as a command but implementing a resourceLoader that won't throw an error if a file does not exist.

[serhiisol]

@cladera have you tested with lazy routes?

[cladera]

@serhiisol I tested with one of my projects which has several lazy routes but I did not pay attention if there were i18n messages within those modules. How would affect lazy loading?

My PR is a proposal to include in this discussion rather than a production-ready implementation.

[serhiisol]

@cladera Ok. I mean I tried to implement this command, but it didn't extract messages from lazy routes

[feloy]

About i18n + AoT with CLI:

Here is what I understand about the current state of i18n + AoT with CLI:

• step 1: you generate locale files with ng-x18n
• step2: you generate *.ngfactory.ts files with "ngc -d src/ --i18nFile=./i18n/messages.fr.xlf --locale=fr --i18nFormat=xlf"
• step 3: you build the app with "ng build --aot"

I understand that step 3 rewrites your bootstrap to include ngfactory files that it created itself. So we have no way to specify to include the factory files we generated in step 2.

Am I right?

@tdesmet Your PR #3098 corrects this problem, as I understand?

[rolandoldengarm]

@feloy That's my understanding as well. I'm waiting eagerly for that PR to be merged.

The only other solution I see now, is replace your step 3 with compiling it yourself using the webpack plugin for Angular CLI. No idea how that's supposed to work though.

[ghidoz]

For now I just deploy each bundle in a separate directory and redirect the user according to his browser language or a cookie from a previous visit to the correct directory/locale.

@tdesmet but how do you serve the app the first time? Let's say I would like to choose the language according to the browser's. Where am I supposed to do the check, since the application has not yet been started? Server side?

[tdesmet]

Yes I currently do this server side, I check the accept-language header to determine the users language. I then redirect the user to the correct version of the app. If I don't support any of the languages in the header then I redirect the user to the english version of the app.

[ghidoz]

Thanks! It would be awesome having the possibility to do this also client side. For example, deciding from the index.html which bundle to load, according to the browser language or a cookie. But I think is not possible yet, as the scripts are added to the index.html by the building process.

[tdesmet]

To do that you would need some bootstrap code that then loads the correct bundle, this would increase your app loading time.

Also in javascript you can't get the whole list of user languages. For example if the has set his browser to prefer nl first and then fr you would only know about nl in javascript. If your app doesn't support nl then you wouldn't know that you could fallback to fr (if tou did support fr) for this user...

[ghidoz]

Ok, got it. But relying on server side is a problem when your assets are served by S3, for example...

[tdesmet]

True, a simple solution might be to deploy each locale in a different directory and have a landing page where you let the user choose the language or automatically redirect him to the correct locale subdirectory.

[ghidoz]

Another thing I would like to understand is how to know which is the current language from the AOT bundled app itself. I'm using momentjs, which has its own i18n, that I have to set with the right language code.

It would be awesome that, when I compile my app with ng build --aot --locale es --i18n-format xtb --i18n-file src/i18n/messages.es.xtb it automatically makes available a LOCALE_ID provider or a config value that I can read from within the app and use (for example passing it to the momentjs library).

At the moment, I think that the only solution should be reading the url to understand if the app is deployed on /en or /es.

What do you think?

[rolandoldengarm]

@ghidoz I've got the same issue, and indeed I'm now reading the base href property and extract the language, like this:

````
let bases = document.getElementsByTagName('base');
let baseHref = null;

      if (bases.length > 0) {
          baseHref = bases[0].href;
      }
      let language = baseHref.replace('/', '');

````
Not elegant, but I've given up making i18n elegant as it's not 100% ready.

[ghidoz]

@rolandoldengarm thanks for the tip. This suggests me another workaround: we can just put in the html a tag like this:

<div style="display:none" #locale i18n>en</div>

It will be replaced with the right language code, as en becomes a term to be translated. Of course, we have to get it from the code, using a template reference variable for example.

[rolandoldengarm]

I'm doing it the old-school way: just a hidden div, with inside spans with i18n attributes plus an HTML id. Then, in my translationService I've got one method:

export class TranslationService { public getTranslationById(id: string) { let element = document.getElementById(id); if (!element) { console.warn(`translation ${id} not found!`); return ''; } return document.getElementById(id).innerText; } }
This works fine :)

Because your option with template reference will only work when in a component, I want to be able to share translations between components via a service.

[ghidoz]

Searching a bit more, I have found this PR: angular/angular#10622.
As far as I understand, it should set the LOCALE_ID provider with the locale passed to the ngc command, but I'm not sure. @vicb can you confirm it?

[vicb]

@ghidoz what is your question ?

[ghidoz]

@vicb the question is: does the LOCALE_ID provider is automatically filled with the locale passed to the ngc command when compiling?

[vicb]

yes, ngc will automatically bind the value when it is provided on the command line

[ghidoz]

Ah wow, awesome! 👍
So this is applied also to the ng build --aot --locale es command, I assume. Right?

[elvisbegovic]

any helps example for this use ? i'm not sur i understand, angualar-cli support i18n with aot?

[rolandoldengarm]

@istiti Yes it does. Just run:
ng build --aot --locale nl --i18n-file path/to/xlf --i18n-format xlf --bh /nl/

You will need to generate a folder per language, and then manually implement a root index.html that redirects the user to the right folder, based on your requirements.
That's why you need to set base href (with --bh).

I'm using NPM build scripts to do this:
"prebuild": "npm run clean -s && mkdir release && mkdir release\\img", "build:en": "ng build --aot --prod --locale en --i18n-format xtb --i18n-file src/i18n/messages.en.xtb --bh /en/ --output-path en && move en release", "build:zh": "ng build --aot --prod --locale zh --i18n-format xtb --i18n-file src/i18n/messages.zh.xtb --bh /zh/ --output-path zh && move zh release", "build": "npm run build:en && npm run build:zh && xcopy index.html release && xcopy src\\img\\* release\\img /s /i"
After running "npm run build", the release folder contains everything I need.

[ghidoz]

I'm almost done, but I have the last problem (I hope): when I try to compile with ng serve --aot --locale es --i18n-file src/locale/es.xtb --i18n-format xtb, it says:

ERROR in Missing translation for message 313850810538580916 ("currentConversation?.user.online}"></div>
    <span [hidden]="currentConversation?.user.online" i18n>[ERROR ->]Offline</span>
    <span [hidden]="!currentConversation?.user.online" i18n>Online</span>
  </div>
"): ChatComponent@11:59

In the messages.xmb I have:

<msg id="2b34680062c4aed90c4d846eab42d6e99501b783">Offline</msg>

while in the es.xtb I have:

<translation id="2b34680062c4aed90c4d846eab42d6e99501b783">Sin conexión</translation>

It doesn't find it and it is looking for the 313850810538580916 message. But there is no message with this ID.

What I'm doing wrong?

Edit: Solved also this! The es.xtb file was created with the previous version of angular. I presume that the ids serialization is different in the new version (in fact the old ones were alphanumeric while now it's just a number). I just generate again the messages and now that I have the ids updated, it works!

[bud-mo]

The extraction does not seems to work.

In an empty project, created with ng new i18n-test, I have added a <h2 i18n>Hello World</h2> tag.
I tried to run the command ./node_modules/.bin/ng-xi18n -p ./src/tsconfig.json and I got this error:

Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AnimationDriver.NOOP in /home/bud/i18n-test/node_modules/@angular/platform-browser/src/dom/animation_driver.d.ts, resolving symbol BrowserTestingModule in /home/bud/i18n-test/node_modules/@angular/platform-browser/testing/browser.d.ts, resolving symbol BrowserTestingModule in /home/bud/i18n-test/node_modules/@angular/platform-browser/testing/browser.d.ts
    at simplifyInContext (/home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:25713:25)
    at StaticReflector.simplify (/home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:25725:15)
    at StaticReflector.annotations (/home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:25223:62)
    at NgModuleResolver.resolve (/home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:17583:84)
    at CompileMetadataResolver.getNgModuleMetadata (/home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:18091:62)
    at CompileMetadataResolver.getNgModuleSummary (/home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:18047:54)
    at /home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:18137:70
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (/home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:18132:51)
    at addNgModule (/home/bud/i18n-test/node_modules/@angular/compiler/bundles/compiler.umd.js:24985:60)
Extraction failed

These are the versions installed:

angular-cli: 1.0.0-beta.24
node: 6.9.1
os: linux x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

[markmssd]

This error seems to be related to this issue, hope it can help you #3706

[ghidoz]

@bud-mo the same for me. I got the same error after upgrading to the new angular cli. Before it was working fine.

Edit: I solved it thanks to angular/angular#13624. Just add this to your tsconfig.json: "exclude": [ "test.ts" ]

[ericeubank-powerschool]

Any progress on the original issue where the AOT compiler is trying to crawl SCSS imports and failing? This thread seems to have changed directions.

[slawojstanislawski]

@ghidoz regarding your comment about id changes, I think the last section of the cookbook "Translation file maintenance and id changes" explains this: most changes to existing markup trigger generation of new ids for the affected translation units.

[ghidoz]

@slawojstanislawski actually, I discovered that the changes were caused by some changes in the serialization: the old ids were like 2b34680062c4aed90c4d846eab42d6e99501b783, while now they are like 313850810538580916. In fact, the markup hasn't been changed.

[feloy]

With the latest upgrades to i18n in angular-cli, I'm able to aot-compile different versions of my app in different languages with the use of --i18n-*, locale and bh options, and the app is able to get the language at runtime via @Inject(LOCALE_ID). Really great!

But (yes, sorry ;) ) I cannot get the LOCALE_ID injected at bootstrap when using ng serve (I always get a 'en-US' value) and so I get a different behavior when I develop and when in (pre-)prod.

So my question: Is there a way to get the LOCALE_ID value when using 'ng serve' also?

[feloy]

For those who would like some help getting this working, I just published a simple example: https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358

Could it be a good idea to add a section in the README.md about using i18n?

[josersleal]

your code does not seem to give more than english words

[ghidoz]

Guys, I tried to sum up all the solutions to the problems I have found while implementing i18n with AOT. I hope it can help: Angular 2 internationalization explained: i18n + Angular CLI + AOT

[ericis]

Thanks @ghidoz. I already spent a few hours installing and uninstalling node modules and editing the code in a small app's code base. Then, I tried a brand new CLI project and it failed too. I'm giving up on CLI + Webpack + Typescript + AOT + i18n for now. It's WAAAYY too buggy at the moment! Just the build/test/serve commands themselves seem to break every couple of version increments this past several months...

[TeodorKolev]

Is that bullshit works or not?

[CanKattwinkel]

@TeodorKolev works for me as long as you don't have scss relative imports in your style files.

[TeodorKolev]

Actually I have not. I use ./../

[TeodorKolev]

Does in homepage of Angular 2 mentioned that it i18n not working with relative scss imports?

[CanKattwinkel]

@TeodorKolev https://github.com/angular/angular-cli/issues/3917

See my comment. For now you could just remove the scss imports before running ng-xi18n.

[TeodorKolev]

The error is in: Documnet

import { DOCUMENT } from "@angular/platform-browser";
  constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: Document) {
    PageScrollConfig.defaultScrollOffset = 50;
    PageScrollConfig.defaultDuration = 350;
  }

changed from Document to any and next error is in
Resource file not found: /styles/variables at ModuleResolutionHostAdapter.readResource

[TeodorKolev]

Will that be fixed in 2017?

[elvisbegovic]

DOES THIS WORK OR NOT ?

[TeodorKolev]

@istiti Of course, not

[elvisbegovic]

@TeodorKolev you surprise me ^

[feloy]

@istiti @TeodorKolev That should work. I just added some documentation: #4480 . Is that help?

[dimitriy-k]

it works indeed (see @feloy docs). But it will create for each language different app? So if you want to switch between languages you need to switch between the apps?

[elvisbegovic]

@dimitriy-k right otherwise use JiT

[TeodorKolev]

We don't want documentation, we don't want different apps, we don't want hacks. We want it to be fixed.

[mackelito]

@dimitriy-k If you want to have the possibility to change language in runtime then you could use https://github.com/ngx-translate/core

[TeodorKolev]

Why would I need something that I cannot change language in runtime?

[mackelito]

@TeodorKolev well all projects have different requirements... I´m not saying that one is better than the other.. just that we might not see one solution that fits all ;)

I guess that your loadtime will be far better if you don´t do it in runtime..

[elvisbegovic]

@TeodorKolev dude you really need check difference on aot and jit (here build folder = performance reason) you can always try JIT and change language without refresh but ..

[dimitriy-k]

On the one hand I can understand that they compile with AOT already translated app, so with multiple languages you will have multiple apps. So when you switch between the languages, you will load new AOT app, but that way you can get probably some session issues (login etc.) and will lose all in services stored data.
On the other hand, you can put translations in an json file and you don't need to precompile json with AOT, right? And that is actually what ng2-translate is doing. I have used for years ng-translate and last projects ng2-translate. Now for a new project trying to use i18n, and I am not yet convinced that i18n has more benefits.

[TeodorKolev]

So much comments, jits, aots, hacks, links to blog, but the result after install i18n is that it is not working. This is the point here.

[TeodorKolev]

@istiti Dude I do not want to check any differences, searching for stuff and reading about fixes. I want when I install i18n, set things up and finally click on different language button, the result to be language changed, you know. This is all I want.

[elvisbegovic]

Lol

[rolandoldengarm]

@feloy Did you have a solution to this problem? In my case, when running ng serve, the LOCALE_ID is undefined...

https://github.com/angular/angular-cli/issues/2201#issuecomment-270378739

[feloy]

@rolandoldengarm It seems that this LOCALE_ID is set only with AOT compilation. You can user ng serve --aot.

[rolandoldengarm]

Ah @feloy thanks!! Will try that.

[ruffiem]

@dimitry-k ng-translate is a tool made by developers for developers. Not translators. Arch is JSON, there is no context, we can deal with plural, gender on the template logic but when it comes to hire a professional to translate your file, you can be very disappointed.

XLIFF is an international standard. I don't think it's a matter of technology, it's a matter of using the right tool for the right purpose.

[itsnotvalid]

The original approach started from this thread is still something better than having a complete bundle for each language supported using this method. I think the discussion should go back to that direction.

[ruffiem]

I'm still wondering why language files are part of the compilation... It's not because of the CLI though.

[cherryland]

I agree with @itsnotvalid. Compiling complete bundles for each language is bs. Point. End of story.

I suggest you take a look at Mozilla's L20n localization framework (MDN: Introducing L20n). The framework basically observes DOM trees using the MutationObserver API, and also uses an "industry standard" translation source file format

import "l20n/dist/bundle/web/l20n";

export function getTranslationProvider(): Promise<{}> {
  return new Promise((resolve) => {
    document.addEventListener('readystatechange', () => resolve(document.l10n.ready));
  });
}

getTranslationProvider().then(() => platformBrowserDynamic().bootstrapModule(AppModule));

@Component({
  selector: 'foo',
  template: `
    <h1 data-l10n-id="bar"></h1>
  `
})
export class FooComponent {}

locale.ja.ftl

bar = めぐみん

the configuration goes into your html

<!DOCTYPE html>
  ...
  <meta name="defaultLanguage" content="ja"/>
  <meta name="availableLanguages" content="en,fr,ja"/>

  <link rel="localization" href="public/locales/locale.{locale}.ftl"/>

where {locale} will be replaced by navigator.language automatically.

[CanKattwinkel]

@0xCHERRY How about the performance on this approach?

In general this does not only affect language files and strings in the template but also date, decimal and currency. Is Angular capable to change this dynamically while runtime? Afaik AngularJS was not.

[figuerres]

my comment: the messages / text in the app should be a thing that can be stored in some kind of data file and loaded at run time.
There are some cases where an app might benefit from multiple versions but for a lot of cases it's better to have one set of code and markup that you maintain.

for all of the "western" langues (english, french, german,spanish, etc...) the layout of the app does not need to be altered, just the text of the messages and the logic for decimal, comma and dates.

for some other langaues a really good treatment might need more, i am thinking of asian and middle eastern where the rules for flow are very different right to left or down not across.

[ishitatsuyuki]

I think the seamless bootstrap is high priority and we should find a solution ASAP.

My proposal: do something similar to router's lazyroutes. We should auto-generate the router for the root (put the AppModule into language subfolder), and lazy load all compiled AppModule. This way, we can seamlessly switch them.
The way to configure it (like, default redirection) remains for discussion.

[filipesilva]

With ng xi18n (https://github.com/angular/angular-cli/wiki/xi18n) and the the --i18n-file/--i18n-format flags for ng build/serve (https://github.com/angular/angular-cli/wiki/build) I think the actionable parts of this issue are addressed.

Runtime loading of different languages is not a feature that currently exists for Angular's i18n though. If you want to request it, you should do so at https://github.com/angular/angular instead of here.

[KTKate]

Combined with #1253 this is an irksome bug. We have to manually import colors/fonts/etc in every scss file across the app but we have to use non-standard syntax to do it if we want i18n to work.

[shobhit12345]

Is there any way to create seperate xlf file for each module?