[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.

[ghost]

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?

[ghost]

@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"
  }
  ...

[ghost]

@jfmaeck just scroll up a bit... #2201 (comment)

[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. 😢

[ghost]

@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 #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?

[ghost]

@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.

[ghost]

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

[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

[ghost]

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

#2201 (comment)

[feloy]

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

[ghost]

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?

[angular-automatic-lock-bot]

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.}