Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ghost opened this issue Sep 18, 2016 · 102 comments
Closed

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

ghost opened this issue Sep 18, 2016 · 102 comments
Labels

Comments

@ghost
Copy link

@ghost ghost commented Sep 18, 2016

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
@ghost ghost mentioned this issue Oct 3, 2016
@elvirdolic
Copy link

@elvirdolic elvirdolic commented Oct 6, 2016

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
Copy link
Member

@filipesilva filipesilva commented Oct 9, 2016

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
Copy link

@mbeckenbach mbeckenbach commented Oct 22, 2016

@elvirdolic That would be great for the moment.

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

@rolandoldengarm
Copy link

@rolandoldengarm rolandoldengarm commented Oct 23, 2016

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
Copy link

@kemsky kemsky commented Oct 24, 2016

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

@rolandoldengarm
Copy link

@rolandoldengarm rolandoldengarm commented Oct 24, 2016

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

@jfmaeck
Copy link

@jfmaeck jfmaeck commented Oct 25, 2016

@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
Copy link

@rolandoldengarm rolandoldengarm commented Oct 25, 2016

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

@kemsky
Copy link

@kemsky kemsky commented Oct 25, 2016

@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
Copy link
Contributor

@serhiisol serhiisol commented Nov 7, 2016

@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
Copy link

@jfmaeck jfmaeck commented Nov 8, 2016

@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
Copy link
Contributor

@cladera cladera commented Nov 8, 2016

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
Copy link
Contributor

@serhiisol serhiisol commented Nov 8, 2016

@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
Copy link
Contributor

@cladera cladera commented Nov 8, 2016

@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
Copy link
Contributor

@serhiisol serhiisol commented Nov 8, 2016

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
Copy link
Contributor

@serhiisol serhiisol commented Nov 9, 2016

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
Copy link

@crain crain commented Nov 11, 2016

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
Copy link

@vicb vicb commented Nov 11, 2016

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
Copy link

@shaneog shaneog commented Nov 17, 2016

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

@rolandoldengarm
Copy link

@rolandoldengarm rolandoldengarm commented Nov 17, 2016

@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
Copy link
Contributor

@tdesmet tdesmet commented Nov 18, 2016

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
Copy link

@ymlsam ymlsam commented Nov 18, 2016

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

@rolandoldengarm
Copy link

@rolandoldengarm rolandoldengarm commented Nov 19, 2016

@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
Copy link

@rolandoldengarm rolandoldengarm commented Nov 22, 2016

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

@elvisbegovic
Copy link
Contributor

@elvisbegovic elvisbegovic commented Feb 7, 2017

@TeodorKolev you surprise me ^

@feloy
Copy link

@feloy feloy commented Feb 7, 2017

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

@dimitriy-k
Copy link

@dimitriy-k dimitriy-k commented Feb 9, 2017

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
Copy link
Contributor

@elvisbegovic elvisbegovic commented Feb 9, 2017

@dimitriy-k right otherwise use JiT

@TeodorKolev
Copy link

@TeodorKolev TeodorKolev commented Feb 9, 2017

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

@mackelito
Copy link

@mackelito mackelito commented Feb 9, 2017

@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
Copy link

@TeodorKolev TeodorKolev commented Feb 9, 2017

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

@mackelito
Copy link

@mackelito mackelito commented Feb 9, 2017

@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
Copy link
Contributor

@elvisbegovic elvisbegovic commented Feb 9, 2017

@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
Copy link

@dimitriy-k dimitriy-k commented Feb 9, 2017

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
Copy link

@TeodorKolev TeodorKolev commented Feb 9, 2017

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
Copy link

@TeodorKolev TeodorKolev commented Feb 9, 2017

@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
Copy link
Contributor

@elvisbegovic elvisbegovic commented Feb 9, 2017

Lol

@rolandoldengarm
Copy link

@rolandoldengarm rolandoldengarm commented Feb 13, 2017

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

#2201 (comment)

@feloy
Copy link

@feloy feloy commented Feb 14, 2017

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

@rolandoldengarm
Copy link

@rolandoldengarm rolandoldengarm commented Feb 15, 2017

Ah @feloy thanks!! Will try that.

@ruffiem
Copy link
Contributor

@ruffiem ruffiem commented Feb 18, 2017

@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
Copy link

@itsnotvalid itsnotvalid commented Feb 20, 2017

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
Copy link
Contributor

@ruffiem ruffiem commented Feb 20, 2017

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

@cherryland
Copy link

@cherryland cherryland commented Feb 21, 2017

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
Copy link

@CanKattwinkel CanKattwinkel commented Feb 22, 2017

@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
Copy link

@figuerres figuerres commented Mar 10, 2017

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
Copy link
Contributor

@ishitatsuyuki ishitatsuyuki commented Mar 17, 2017

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
Copy link
Member

@filipesilva filipesilva commented May 22, 2017

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
Copy link

@KTKate KTKate commented Jun 28, 2017

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
Copy link

@shobhit12345 shobhit12345 commented Jul 12, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.