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

Comments

Projects
None yet
@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 referenced this issue Oct 3, 2016

Closed

i18n support #2493

@elvirdolic

This comment has been minimized.

Show comment
Hide comment
@elvirdolic

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

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 comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Oct 9, 2016

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@mbeckenbach

mbeckenbach Oct 22, 2016

@elvirdolic That would be great for the moment.

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

@elvirdolic That would be great for the moment.

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

@rolandoldengarm

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

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

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

This comment has been minimized.

Show comment
Hide comment
@kemsky

kemsky Oct 24, 2016

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

kemsky commented Oct 24, 2016

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

@rolandoldengarm

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Oct 24, 2016

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

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

@jfmaeck

This comment has been minimized.

Show comment
Hide comment
@jfmaeck

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

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

This comment has been minimized.

Show comment
Hide comment

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

@kemsky

This comment has been minimized.

Show comment
Hide comment
@kemsky

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

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

This comment has been minimized.

Show comment
Hide comment
@serhiisol

serhiisol Nov 7, 2016

Contributor

@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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@jfmaeck

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

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

This comment has been minimized.

Show comment
Hide comment
@cladera

cladera Nov 8, 2016

Contributor

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?

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@serhiisol

serhiisol Nov 8, 2016

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@cladera

cladera Nov 8, 2016

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@serhiisol

serhiisol Nov 8, 2016

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@serhiisol

serhiisol Nov 9, 2016

Contributor

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 =)

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@crain

crain 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?

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

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Nov 11, 2016

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@shaneog

shaneog Nov 17, 2016

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

shaneog commented Nov 17, 2016

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

@rolandoldengarm

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

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

@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

This comment has been minimized.

Show comment
Hide comment
@tdesmet

tdesmet Nov 18, 2016

Contributor

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.

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@ymlsam

ymlsam Nov 18, 2016

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

ymlsam commented Nov 18, 2016

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

@rolandoldengarm

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

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

@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

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

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

@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

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Nov 29, 2016

Member

As discussed in #3314 (comment), 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.

Member

vicb commented Nov 29, 2016

As discussed in #3314 (comment), 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

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Nov 29, 2016

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?

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

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Nov 30, 2016

Member

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.

Member

vicb commented Nov 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Nov 30, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Nov 30, 2016

Member

ng-xi18n -p /src

Member

vicb commented Nov 30, 2016

ng-xi18n -p /src

@rolandoldengarm

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Nov 30, 2016

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

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

@vicb

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Nov 30, 2016

Member

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

Member

vicb commented Nov 30, 2016

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

@wardbell

This comment has been minimized.

Show comment
Hide comment
@wardbell

wardbell Dec 1, 2016

Contributor

OK. Coming in PR angular/angular.io#2740

Contributor

wardbell commented Dec 1, 2016

OK. Coming in PR angular/angular.io#2740

@CanKattwinkel

This comment has been minimized.

Show comment
Hide comment
@CanKattwinkel

CanKattwinkel Jan 20, 2017

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

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

@TeodorKolev

This comment has been minimized.

Show comment
Hide comment
@TeodorKolev

TeodorKolev Jan 20, 2017

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

TeodorKolev commented Jan 20, 2017

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

@TeodorKolev

This comment has been minimized.

Show comment
Hide comment
@TeodorKolev

TeodorKolev Jan 20, 2017

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

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

@CanKattwinkel

This comment has been minimized.

Show comment
Hide comment
@CanKattwinkel

CanKattwinkel Jan 20, 2017

@TeodorKolev #3917

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

@TeodorKolev #3917

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

@TeodorKolev

This comment has been minimized.

Show comment
Hide comment
@TeodorKolev

TeodorKolev Jan 20, 2017

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 commented Jan 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@TeodorKolev

TeodorKolev Jan 20, 2017

Will that be fixed in 2017?

Will that be fixed in 2017?

@istiti

This comment has been minimized.

Show comment
Hide comment
@istiti

istiti Feb 7, 2017

DOES THIS WORK OR NOT ?

istiti commented Feb 7, 2017

DOES THIS WORK OR NOT ?

@TeodorKolev

This comment has been minimized.

Show comment
Hide comment

@istiti Of course, not

@istiti

This comment has been minimized.

Show comment
Hide comment
@istiti

istiti Feb 7, 2017

@TeodorKolev you surprise me ^

istiti commented Feb 7, 2017

@TeodorKolev you surprise me ^

@feloy

This comment has been minimized.

Show comment
Hide comment
@feloy

feloy Feb 7, 2017

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

feloy commented Feb 7, 2017

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

@dimitriy-k

This comment has been minimized.

Show comment
Hide comment
@dimitriy-k

dimitriy-k 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?

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?

@istiti

This comment has been minimized.

Show comment
Hide comment
@istiti

istiti Feb 9, 2017

@dimitriy-k right otherwise use JiT

istiti commented Feb 9, 2017

@dimitriy-k right otherwise use JiT

@TeodorKolev

This comment has been minimized.

Show comment
Hide comment
@TeodorKolev

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

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

@mackelito

This comment has been minimized.

Show comment
Hide comment
@mackelito

mackelito 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

@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

This comment has been minimized.

Show comment
Hide comment
@TeodorKolev

TeodorKolev Feb 9, 2017

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

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

@mackelito

This comment has been minimized.

Show comment
Hide comment
@mackelito

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

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

@istiti

This comment has been minimized.

Show comment
Hide comment
@istiti

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

istiti 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

This comment has been minimized.

Show comment
Hide comment
@dimitriy-k

dimitriy-k 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.

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

This comment has been minimized.

Show comment
Hide comment
@TeodorKolev

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

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

This comment has been minimized.

Show comment
Hide comment
@TeodorKolev

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

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

@istiti

This comment has been minimized.

Show comment
Hide comment

istiti commented Feb 9, 2017

Lol

@rolandoldengarm

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm 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 Did you have a solution to this problem? In my case, when running ng serve, the LOCALE_ID is undefined...

#2201 (comment)

@feloy

This comment has been minimized.

Show comment
Hide comment
@feloy

feloy Feb 14, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Feb 15, 2017

Ah @feloy thanks!! Will try that.

Ah @feloy thanks!! Will try that.

@ruffiem

This comment has been minimized.

Show comment
Hide comment
@ruffiem

ruffiem Feb 18, 2017

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@itsnotvalid

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

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

This comment has been minimized.

Show comment
Hide comment
@ruffiem

ruffiem Feb 20, 2017

Contributor

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

Contributor

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.

@0xCHERRY

This comment has been minimized.

Show comment
Hide comment
@0xCHERRY

0xCHERRY 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.

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

This comment has been minimized.

Show comment
Hide comment
@CanKattwinkel

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

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

This comment has been minimized.

Show comment
Hide comment
@figuerres

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

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

This comment has been minimized.

Show comment
Hide comment
@ishitatsuyuki

ishitatsuyuki Mar 17, 2017

Contributor

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.

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva May 22, 2017

Member

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.

Member

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.

@JKGisMe

This comment has been minimized.

Show comment
Hide comment
@JKGisMe

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

JKGisMe 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

This comment has been minimized.

Show comment
Hide comment
@shobhit12345

shobhit12345 Jul 12, 2018

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

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