question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[i18n] ability to dynamically load translations for the app

See original GitHub issue

🐞 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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:1
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
petebacondarwincommented, Jul 22, 2020

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

0reactions
AlvaroP95commented, Oct 14, 2022

Hi 😃 Have you found a solution?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Add or Load Translations - i18next documentation
There are a few options to load translations to your application instrumented by i18next. The most common approach to this adding a so...
Read more >
Angular — Dynamic Language (i18n and l10n)
Learn how to run your application with more than one language and bring ... as we will do this dynamically, in this step...
Read more >
Dynamic translations in Angular made possible - Medium
A practical guide to implement lazy-loaded translations​​ One of the common pitfalls when using i18n are large translation files size and inability to...
Read more >
Angular 2 i18n dynamic/instant translation - Stack Overflow
In short it is not possible to change the locale without reloading the app as the translation work is done by Angular compiler....
Read more >
Flutter dynamically load translation in your app
Dynamically load translation in your app. Getting started. Initiate I18n in your dart's main() {}. void main() { // ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found