[i18n] ability to dynamically load translations for the app

Open
#18,331 8 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
angular, typescript
Domain
localization

Research direction

Start with @angular/localize and the linked v8 JIT i18n documentation; compare the v9 loadTranslations API with the requested XLIFF and runtime-locale workflow. Done means there is a supported approach for switching locales during development, including how XLIFF data is handled.

Written by the indexing model from the issue text.

Description

area: @angular-devkit/build-angular devkit/build-angular:i18n needs: investigation

🐞 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
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.