Angular 12项目配置ngx-translate后所有文本未翻译问题排查

问题根源及对应解决方案 #

1. SharedModule未导出TranslateModule

你当前的SharedModule的exports数组仅导出了MaterialModule，其他业务模块需要使用ngx-translate的translate指令、翻译管道时，无法访问到TranslateModule的能力，因此翻译逻辑不会生效。
修改SharedModule的exports配置即可：

exports: [
  MaterialModule,
  TranslateModule // 新增该导出项
]

如果你已经将TranslateModule.forRoot()迁移到了AppModule，则SharedModule只需导入普通的TranslateModule后导出即可，不要在非根模块重复调用forRoot方法。

2. 仅设置默认语言未主动激活目标语言

setDefaultLang方法仅用于设置当前激活语言找不到对应翻译时的兜底语言，不会主动触发语言切换逻辑，你需要额外调用use方法激活目标语言，修改AppComponent构造函数逻辑：

constructor(
  private router: Router,
  private injector: Injector,
  private translate: TranslateService,
) {
  const targetLang = environment.language;
  translate.setDefaultLang(targetLang);
  translate.use(targetLang); // 新增该行，主动加载并应用目标语言的翻译包
}

3. 懒加载模块适配（可选，按需检查）

如果项目中存在懒加载的功能模块，需要在每个懒加载模块的imports数组中添加TranslateModule.forChild()，才能在懒加载模块内正常使用翻译能力。

验证方法 #

你可以先在AppComponent的模板中添加测试代码<span translate>Aggiungi Ruoli</span>，如果该文本能正常翻译为Add Roles，则说明根模块配置正常，问题出在业务子模块的导入配置上；如果仍无法翻译，优先检查前两项配置是否正确。

内容的提问来源于stack exchange，提问作者usr-local-ΕΨΗΕΛΩΝ