Angular 11（或 9+）I18n 在启动时设置区域设置答案

【问题标题】：Angular 11 (or 9+) I18n set Locale at startupAngular 11（或 9+）I18n 在启动时设置区域设置
【发布时间】：2021-03-13 13:49:14
【问题描述】：

我有一个旧的 Angular 项目 (v8)，我使用 i18n 来标记我所有的翻译。我有 2 个 xlf 文件，一个用于 en，一个用于 fr - 并在运行时选择要使用的文件。这很好用。

但是，在新的 Angular 项目 (v11) 中，这种方法不再有效。代码没有错误，也没有提示有问题，但是屏幕上没有翻译文本。

main.ts文件中的代码如下

let languageCode: string = localStorage.getItem("language") ? localStorage.getItem("language") : 'en-GB';

// use the require method provided by webpack
// we use the webpack raw-loader to return the content as a string
declare const require;

var translations = undefined;

switch (languageCode) {
    case AppService.Languages.english:
        break;
  default:
        translations = require(`raw-loader!./locale/messages.${languageCode}.xlf`);
  break;
}
 
platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    {provide: TRANSLATIONS, useValue: translations},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
    {provide: LOCALE_ID, useValue: languageCode }
  ]
});

我在 app.module.ts 中也有以下内容

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';

let urlParams: URLSearchParams = new URLSearchParams(window.location.search);
let languageCode: string = localStorage.getItem("language") ? localStorage.getItem("language") : 'en-GB';

registerLocaleData(localeFr, 'fr-FR', localeFrExtra);

.....

 providers: [
    { provide: LOCALE_ID, useValue: languageCode },

有没有其他人有过这种方法在较新的 Angular 版本中不起作用的经验？

注意：诸如日期格式之类的内置内容在正确的语言环境中出现 - EG 日期格式 01 décembre 20。它纯粹是 i18n 的替换，尚未完成。

【问题讨论】：

Update 来自 Angular 的注释。见after the update中的注3
请注意我没有升级项目，这是一个全新的项目，但是我从旧项目中复制了这部分代码，因为我想要相同的功能
从 9.0 开始您需要添加额外的代码。这不仅仅是更新，而是以 9+ 的方式进行

标签： angular angular11

【解决方案1】：

我确实添加了额外的代码，但是我现在意识到如果你使用 ivy - (tsconfig.json - angularCompilerOptions - "enableIvy": false) 那么它在运行时显然不能与上述代码一起使用。

我已经阅读了关于他们为 i18n 所做的更改的 ivy 文档，我可以看到他们只是不打算在运行时更改翻译。

我已经关闭了 ivy，旧代码现在可以使用了。

我可以看到他们的推理，但我不能为每种语言设置不同的 url，所以这是我唯一的选择。

【讨论】：