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

@Brocco

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

@christiandreher

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.

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.

@elvirdolic

@elvirdolic That would be great for the moment.

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

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

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

@jfmaeck

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

@jfmaeck

@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

@serhiisol

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

@vicb

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?

@jfmaeck

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

@serhiisol

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

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

@Dimitry-k

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

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.

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

@itsnotvalid

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.

@0xcherry

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

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.

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.

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.

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.

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

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

Navigation Menu

Repository navigation

[Discussion] angular-cli and i18n (ng-xi18n + ngc) #2201

77 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Discussion] angular-cli and i18n (ng-xi18n + ngc) #2201

Description

Activity

elvirdolic commented on Oct 6, 2016

filipesilva commented on Oct 9, 2016

mbeckenbach commented on Oct 22, 2016

kemsky commented on Oct 24, 2016

jfmaeck commented on Oct 25, 2016

kemsky commented on Oct 25, 2016

serhiisol commented on Nov 7, 2016

jfmaeck commented on Nov 8, 2016

cladera commented on Nov 8, 2016

serhiisol commented on Nov 8, 2016

cladera commented on Nov 8, 2016

77 remaining items

feloy commented on Feb 14, 2017

ruffiem commented on Feb 18, 2017

itsnotvalid commented on Feb 20, 2017

ruffiem commented on Feb 20, 2017

cherryland commented on Feb 21, 2017

CanKattwinkel commented on Feb 22, 2017

figuerres commented on Mar 10, 2017

ishitatsuyuki commented on Mar 17, 2017

filipesilva commented on May 22, 2017

KTKate commented on Jun 28, 2017

shobhit12345 commented on Jul 12, 2018

angular-automatic-lock-bot commented on Jun 3, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions