Angular i18n - 动态加载翻译

Question

我需要为我的 Angular 应用异步加载翻译。 我正在尝试使用@angular/localize模块中的loadTranslations function。 问题是它只有在我将它放入底部的polyfills.ts文件时才有效。 我需要使用 ajax 请求加载此数据，所以我想延迟引导应用程序直到那个。 这是来自main.ts的代码

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import '@angular/localize/init';

import { loadTranslations } from '@angular/localize';

// delay from ajax call
setTimeout(() => {
  loadTranslations({
    'test': '123'
  });

  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}, 1000);

该应用程序启动时没有错误，但未应用翻译。 如果我删除异步延迟，它也不起作用：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import '@angular/localize/init';

import { loadTranslations } from '@angular/localize';

loadTranslations({
  'test': '123'
});

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

但是，如果我将 i18n 代码移至polyfills.ts （仅同步版本），它会起作用

import '@angular/localize/init';

import { loadTranslations } from '@angular/localize';

loadTranslations({
  'test': '123'
});

这是一个示例模板

<p i18n="@@test">Not working</p>

为什么它只适用于polyfills.ts而不适用于main.ts并且有没有办法异步初始化它？