Description

fetis

opened on Jul 21, 2020

Issue body actions

🐞 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

Reacted by Alexander Wunschik

Activity

1. vugar005 commented on Jul 21, 2020

   

   vugar005

   on Jul 21, 2020

   More actions

   @fetis I think you can achieve that by using an APP_INITIALIZER Token. Here is the article where Netanel nicely describes implementation. link
2. petebacondarwin commented on Jul 21, 2020

   

   petebacondarwin

   on Jul 21, 2020

   Contributor

   More actions

   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.
3. fetis commented on Jul 22, 2020

   

   fetis

   on Jul 22, 2020

   Author

   More actions

   @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.
4. petebacondarwin commented on Jul 22, 2020

   

   petebacondarwin

   on Jul 22, 2020

   Contributor

   More actions

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

   Reacted by Sergey Fetiskin
5. petebacondarwin

   transferred this issue fromangular/angularon Jul 22, 2020
6. alan-agius4

   added

   needs: discussionOn the agenda for team meeting to determine next stepsOn the agenda for team meeting to determine next steps

   area: @angular-devkit/build-angular

   devkit/build-angular:i18n

   on Jul 22, 2020
7. ngbot

   added this to the needsTriage milestone on Jul 22, 2020
8. dgp1130 commented on Jul 30, 2020

   

   dgp1130

   on Jul 30, 2020

   Collaborator

   More actions

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

   added

   needs: investigationRequires some digging to determine if action is neededRequires some digging to determine if action is needed

   and removed

   needs: discussionOn the agenda for team meeting to determine next stepsOn the agenda for team meeting to determine next steps

   on Jul 30, 2020
10. fetis commented on Aug 13, 2020

    

    fetis

    on Aug 13, 2020

    Author

    More actions

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

    

    dgp1130

    on Aug 13, 2020

    Collaborator

    More actions

    @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.
12. AlvaroP95 commented on Oct 14, 2022

    

    AlvaroP95

    on Oct 14, 2022

    More actions

    Hi :) Have you found a solution?

Issue actions