[i18n] ability to dynamically load translations for the app

[fetis]

🐞 bug report

Affected Package

@angular/localize

Is this a regression?

Yes, it's a regression from v8

Description

In v8 was a very handy solution to load your translation data for development. It's described on this documentation page https://v8.angular.io/guide/i18n#merge-with-the-jit-compiler

With the migration to v9 there's no corresponding solution that will allow to quickly switch locales during runtime for development. As far as I understand, the suggested replacement is to run ng serve with the desired locale every time.

A little bit background here. We have 2 applications, every with 4 languages. For production, we build it with AOT as suggested. For development we use JIT and load corresponding translation depending on the browser URL (German for /de/ for example), this mimics prod behavior. So, to switch translation and check how the interface looks in a different language, you just need to pick up another item in the language menu. The page reloads at the same URL but with a different language. Starting from v9 it's not supported, so we would have to run ng serve every time for a new language and start from the home page for every language again.

What would be a suggested way repeat v8 behavior? I checked loadTranslatios but it accepts a key-value object, not a XLIFF data. Is any function that can transform from XLIFF to a format understandable for loadTranslations

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.9
Node: 12.4.0
OS: darwin x64

Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.9
@angular-devkit/build-angular      0.901.9
@angular-devkit/build-ng-packagr   0.901.9
@angular-devkit/build-optimizer    0.901.9
@angular-devkit/build-webpack      0.901.9
@angular-devkit/core               9.1.9
@angular-devkit/schematics         9.1.9
@angular/cdk                       9.2.4
@angular/cli                       9.1.9
@angular/material                  9.2.4
@angular/material-moment-adapter   9.2.4
@ngtools/webpack                   9.1.9
@schematics/angular                9.1.9
@schematics/update                 0.901.9
ng-packagr                         9.1.5
rxjs                               6.5.5
typescript                         3.8.3
webpack                            4.42.0

[vugar005]

@fetis I think you can achieve that by using an APP_INITIALIZER Token. Here is the article where Netanel nicely describes implementation. link

[petebacondarwin]

I think one option would be to use ng build --watch --localize and then run your own local server in the dist folder. The build will generate folders for each locale, and will run whenever you change anything (similar to ng serve) and you should be able to jump between locales by changing the URL.

[fetis]

@vugar005 it's about how to load data before the app load, but my problem is different -- it's how to provide data for translations

@petebacondarwin this can be taken as a temporary workaround, but it doubles the build time after every change for my project and makes ng serve useless. Do you have any plans to bring translations merging back in JIT mode? This would be very handy for development.

[petebacondarwin]

I am going to transfer this over to the CLI project because changes to ng serve will primarily be handled there.

[dgp1130]

We're starting to look into dynamic i18n to be able to change locales at runtime. It's still in the early stages and isn't highly prioritized at the moment.

As an alternative, www.locl.app provides a library can includes this functionality. That can act as a workaround while we evaluate more official support in Angular.

[fetis]

@dgp1130 do you want to say that I can use locl.app on top of built-in i18n for development mode only?

[dgp1130]

@fetis, I haven't used locl myself, but I'm sure there's a way to apply it to dev builds only if that's what you want.

[AlvaroP95]

Hi :) Have you found a solution?