Angular ngx-translate首次加载仅显示翻译键不翻译问题排查求助

• 模拟低速无缓存环境：打开Chrome开发者工具，切换到「网络」面板，限速选择「Slow 3G」，勾选「停用缓存」；再切换到「应用」面板，找到「存储」选项卡，勾选所有可清除项后点击「清除站点数据」，完全关闭浏览器后重新打开输入地址首次访问，可大概率复现首次加载翻译未就绪的场景。
• 强制延迟翻译文件请求：新增临时Http拦截器，匹配/assets/i18n/路径下的json请求，强制增加3-5秒延迟后再返回响应，可稳定复现翻译文件加载慢于页面渲染的场景。
• 禁用翻译文件缓存：修改createTranslateLoader方法，给翻译文件请求加动态时间戳后缀，避免浏览器缓存干扰：

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', `.json?v=${Date.now()}`);
}

修改后每次请求翻译文件都会走新请求，不会复用缓存，方便复现首次加载状态。

1. 验证APP_INITIALIZER阻塞逻辑是否生效：在initTranslations方法的translateService.use(language).toPromise()前后加日志，同时在AppComponent的ngOnInit钩子中打印翻译服务当前加载状态，确认是否存在Angular未等初始化完成就启动应用的情况，部分老旧版本Angular存在APP_INITIALIZER异步逻辑未正确阻塞的已知问题。
2. 检查翻译加载异常捕获：当前代码未处理translateService.use的异常情况，可新增catch逻辑打印错误，确认是否存在首次请求翻译文件超时、跨域、资源路径错误等偶现问题。
3. 排查懒加载模块配置：如果项目使用了路由懒加载，确认所有懒加载模块是否正确导入TranslateModule.forChild()，是否存在子模块独立初始化TranslateService、未继承根模块已加载的翻译内容的问题。

可先在根组件增加加载状态判断，等翻译初始化完成后再渲染页面内容，避免用户看到翻译键：

// app.component.ts
isTranslationReady = false;
constructor(private translateService: TranslateService) {
  this.translateService.onLangChange.subscribe(() => {
    this.isTranslationReady = true;
  })
}

<!-- app.component.html -->
<div *ngIf="isTranslationReady">
  <router-outlet></router-outlet>
</div>

内容的提问来源于stack exchange，提问作者Michael Winther