Angular 14中ngx-translate嵌套翻译失效问题咨询

针对你遇到的嵌套翻译键只显示键名而非翻译值的问题，可按以下步骤排查配置：

• 确认TranslateModule的Loader配置正确
  确保使用TranslateHttpLoader正确加载JSON文件，且配置符合AOT编译要求。在app.module.ts中配置示例：

  import { HttpClientModule, HttpClient } from '@angular/common/http';
  import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  
  export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }
  
  @NgModule({
    imports: [
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    ]
  })
  export class AppModule { }
  

• 检查翻译JSON文件的语法正确性
  确保嵌套结构的JSON没有语法错误，比如遗漏逗号、引号不匹配、多余的逗号等。示例正确结构：

  {
    "license_page": {
      "title": "License activation",
      "desc": "Please enter your license key"
    },
    "top_key": "Top level text"
  }
  

• 确认TranslateService初始化正常
  在根组件（如app.component.ts）中设置默认语言和当前使用语言，确保翻译服务正确初始化：

  import { TranslateService } from '@ngx-translate/core';
  
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
  

• 匹配ngx-translate与Angular版本
  Angular 14需对应兼容的ngx-translate版本：@ngx-translate/core@14.x、@ngx-translate/http-loader@7.x，版本不兼容可能导致嵌套键解析失败。

• 自定义Loader需返回嵌套对象
  若使用自定义Loader而非TranslateHttpLoader，需确保Loader返回的是解析后的嵌套JavaScript对象，而非未解析的JSON字符串。

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